How do i stack columns in Bootstrap 4 for mobile

Question

I want to 2 columns stacked on desktop but on mobile I want the order switched the other way round.

<div class="row bottom-footer">
   <div class="col-lg-6 col-md-6 col-sm-12 order-2 order-sm-12">
      <span class="">text</span>
   </div>
   <div class="col-lg-6 col-md-6 col-sm-12 order-1 order-col-md-6">
      <span class="">text</span>
   </div>
</div>

Do you want for mobile you see spans side by side? – לבני מלכה Jun 17 '18 at 09:01 — לבני מלכה, Jun 17 '18 at 09:01
Yes, I want the columns to switch order when it is col-sm – tom0101 Jun 17 '18 at 09:07 — tom0101, Jun 17 '18 at 09:07
so why you use:`order-col-md-6` ?? – לבני מלכה Jun 17 '18 at 09:09 — לבני מלכה, Jun 17 '18 at 09:09

mahan · Answer 1 · 2018-06-17T11:06:45.333

You only need to reorder the first column. Use order-last and order-sm-first to do so.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<div class="row bottom-footer">
  <div class="col-lg-6 col-md-6 col-sm-12 order-last order-sm-first">
    <span class="">text1</span>
  </div>
  <div class="col-lg-6 col-md-6 col-sm-12 ">
    <span class="">text2</span>
  </div>
</div>

Since you use col-md-6, col-lg-6 is unnecessary.

score 2 · Answer 2 · answered Jun 17 '18 at 09:10

you need to use order-2 order-sm-1 and order-1 order-sm-2 respectively on both divs

order-1 and order-2 will start applying from 0px to mobile width and order-sm-* will start applying after mobile screen widths.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<div class="row bottom-footer">
  <div class="col-lg-6 col-md-6 col-sm-12 order-2 order-sm-1">
    <span class="">text1</span>
  </div>
  <div class="col-lg-6 col-md-6 col-sm-12 order-1 order-sm-2">
    <span class="">text2</span>
  </div>
</div>

@TomSpink Plese accept my answer if it worked for you so that iff someone visits this answer in future, he/she might know that this workedfor you :) — Nandita Sharma, Jun 17 '18 at 09:48
doesn't need all those classes, just in one div, see the other answer — dippas, Jun 17 '18 at 10:12

How do i stack columns in Bootstrap 4 for mobile

2 Answers2