bootstrap_grid_with_just_css.css

* {
  margin: 0;
}

.container {
  margin: 0 auto;
  padding: 40px;
}

.row {
  display: flex;
  flex-wrap: wrap;
}

.card {
  border: 1px solid black;
  margin: 10px 5px;
  height: 250px;
  width: auto;
  overflow: hidden;
}

.avatar-flex {
  display: flex;
  justify-content: center;
  align-items: center;
}

.avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: url('https://via.placeholder.com/50x50');
  background-size: cover;
  background-position: center;
}

.card-wrapper {
  position: relative;
}

.avatar-absolute {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: url('https://via.placeholder.com/50x50');
  background-size: cover;
  background-position: center;
  position: absolute;
  top: 30px;
  left: 10px;
}

.description {
  position: absolute;
  top: 100px;
  left: 15px;
  right: 15px;
}

.description p {
  font-size: 20px;
  font-family: sans-serif;
}

.details {
  position: absolute;
  color: gray;
  font-family: sans-serif;
  bottom: 30px;
  left: 15px;
  right: 15px;
}

/* For mobile phones: */
  .col-1 {width: 8.33%;}
  .col-2 {width: 16.66%;}
  .col-3 {width: 25%;}
  .col-4 {width: 33.33%;}
  .col-5 {width: 41.66%;}
  .col-6 {width: 50%;}
  .col-7 {width: 58.33%;}
  .col-8 {width: 66.66%;}
  .col-9 {width: 75%;}
  .col-10 {width: 83.33%;}
  .col-11 {width: 91.66%;}
  .col-12 {width: 100%;}

@media only screen and (min-width: 600px) {
    /* For tablets: */
    .col-sm-1 {width: 8.33%;}
    .col-sm-2 {width: 16.66%;}
    .col-sm-3 {width: 25%;}
    .col-sm-4 {width: 33.33%;}
    .col-sm-5 {width: 41.66%;}
    .col-sm-6 {width: 50%;}
    .col-sm-7 {width: 58.33%;}
    .col-sm-8 {width: 66.66%;}
    .col-sm-9 {width: 75%;}
    .col-sm-10 {width: 83.33%;}
    .col-sm-11 {width: 91.66%;}
    .col-sm-12 {width: 100%;}
}

@media only screen and (min-width: 768px) {
    /* For desktop: */
    .col-md-1 {width: 8.33%;}
    .col-md-2 {width: 16.66%;}
    .col-md-3 {width: 25%;}
    .col-md-4 {width: 33.33%;}
    .col-md-5 {width: 41.66%;}
    .col-md-6 {width: 50%;}
    .col-md-7 {width: 58.33%;}
    .col-md-8 {width: 66.66%;}
    .col-md-9 {width: 75%;}
    .col-md-10 {width: 83.33%;}
    .col-md-11 {width: 91.66%;}
    .col-md-12 {width: 100%;}
} 

bootstrap_grid_with_just_css.html

<div class="container">
  <div class="row">
    <div class="col-12 col-sm-6 col-md-3">
      <div class="card">
        <p>Hi my name is Harrison. This is a block of text. I can make this into a grid or a flexbox. In this example of code I created my own version of bootstrap's grid system. I also used relative and absolute positioning.</p>
      </div>
    </div>
    <div class="col-12 col-sm-6 col-md-3">
      <div class="card avatar-flex">
        <div class="avatar"></div>
      </div>
    </div>
    <div class="col-12 col-sm-6 col-md-3">
      <div class="card card-wrapper">
        <div class="avatar-absolute"></div>
        <div class="description">
          <p>Flat in melbourne with spa</p>
        </div>
        <div class="details">
          <p>3 bedroom | 2 bathroom | Full kitchen</p>
        </div>
      </div>
    </div>
    <div class="col-12 col-sm-6 col-md-3">
      <div class="card"></div>
    </div>
    <div class="col-12 col-sm-6 col-md-3">
      <div class="card"></div>
    </div>
    <div class="col-12 col-sm-6 col-md-3">
      <div class="card"></div>
    </div>
  </div>  
</div>