responsive bootstrap grid

by Osama Qassar

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<div class="grid_header row hideMob">
  <div class="col-sm-1 col column-title"> id  </div>
  <div class="col-sm-1 col column-title"> photo </div>
  <div class="col-sm-3 col column-title"> property title </div>
  <div class="col-sm-2 col column-title"> property price </div>
  <div class="col-sm-2 col column-title"> address </div>
  <div class="col-sm-1 col column-title"> state </div>
  <div class="col-sm-2 col column-title hideMob"> action </div>
</div>

<div class="grid_row row"  >

  <div class="col-4 hideWeb grid_header"> photo </div>
  <div class="col-md-1 col-8 notwrapped"> photo info </div>
  
  <div class="col-4 hideWeb grid_header"> photo </div>
  <div class="col-md-1 col-8 notwrapped"> photo info </div>
  
  <div class="col-4 hideWeb grid_header"> property title </div>
  <div class="col-md-3 col-8 notwrapped"> property title info </div>
  
  <div class="col-4 hideWeb grid_header"> property price </div>
  <div class="col-md-2 col-8 notwrapped"> property price info </div>
  
  <div class="col-4 hideWeb grid_header"> address </div>
  <div class="col-md-2 col-8 notwrapped"> address info </div>
  
  <div class="col-4 hideWeb grid_header"> state </div>
  <div class="col-md-1 col-8 notwrapped"> state info </div>
  
  <div class="col-4 hideWeb grid_header"> action </div>
  <div class="col-md-2 col-8 notwrapped"> action info </div>

</div>

CSS

.hideWeb{
  display: none;
}
@media(max-width: 768px) {
    .hideWeb{
        display: block;
    }
}
.grid_header{
  background: gray
}