Complex Bootstrap stacked columns on mobile

Question

i have this column from desktop

|      col-lg-5       | col-lg-2 | | col-lg-2 | | col-lg-2 | 

how to make on mobile

|            col-sm-12           |
| col-sm-4 | col-sm-4 | col-sm-4 |

i try with this

<div class="col-sm-12 col-md-12 col-lg-5">
   xxx
</div>
<div class="col-xs-4 col-sm-4 col-md-2 col-lg-2">
   xxx
</div>
<div class="col-xs-4 col-sm-4 col-md-2 col-lg-2">
   xxx
</div>
<div class="col-xs-4 col-sm-4 col-md-2 col-lg-2">
   xxx
</div>

but on mobile displaying

|   col-12   |
|   col-12   |
|   col-12   |
|   col-12   |

Answer 1

You have to define the bootstrap grid system inside .row then and then you will have grids on the page.

Try this in your code,

<div class="row">
  <div class="col-12 col-sm-12 col-md-5">
    xxx
  </div>
  <div class="col-4 col-sm-4 col-md-2">
    xxx
  </div>
  <div class="col-4 col-sm-4 col-md-2">
    xxx
  </div>
  <div class="col-4 col-sm-4 col-md-2">
    xxx
  </div>
</div>

Note: Bootstrap 4.0 version has removed .col-xs class. Check available classes.

And here is snippet also,

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
<div class="row">
  <div class="col-12 col-sm-12 col-md-5">
    xxx
  </div>
  <div class="col-4 col-sm-4 col-md-2">
    xxx
  </div>
  <div class="col-4 col-sm-4 col-md-2">
    xxx
  </div>
  <div class="col-4 col-sm-4 col-md-2">
    xxx
  </div>
</div>