Простой пример grid-in-css

simple-grid-in-css.scss

$breakpoints: (
  "xs": 'max-width: 768px',
  "sm": 'min-width: 768px',
  "md": 'min-width: 992px',
  "lg": 'min-width: 1200px',
  "xlg": 'min-width: 1400px'
);

$gap: 15px;
$column: 12;
$container: 1400px;

@function latestValueMap($map) {
  @return map-get($map, nth(map-keys($map), length(map-keys($map))));
}

@function widthColumn($col) {
  @return calc(100% / #{$column} * #{$col} - #{$gap * 2});
}

@mixin media($size, $col) {
  @if map-has-key($breakpoints, $size) {
    $width: map-get($breakpoints, $size);
    @media ($width) {
      width: widthColumn($col);
      @content;
    }
  }
}

:root {
  font-size: calc(1vw + 1vh);
}

body {
  font-size: 1rem;
}

.container {
  padding: 0 #{$gap};
  margin: 0 auto;
  max-width: $container;
}

.row {
  margin: 0 -#{$gap};
  display: flex;
  flex-wrap: wrap;
  > * {
    margin: 0 #{$gap};
  }
}

.main-screen {
  padding: 50px 0;
  background-color: #0394c0;
  color: #fff;

  &__info {
    @include media("sm", 8);
  }
  
  &__img {
    img {
      max-width: 100%;
      height: auto;
    }
    
    @include media("xs", 12) {
      order: -1;  
      text-align: center;
    };
    @include media("sm", 4);
  }
}