Bootstrap make left column go below when stacking

user_8737016 0
Viewed 78

I have a page with the following structure:

<div class="row">
    <div class="col-md-3"> LEFT </div>
    <div class="col-md-6"> CENTER </div>
    <div class="col-md-3"> RIGHT </div>
</div>

that results in something like

LEFT            CENTER             RIGHT

However, in smaller screens I want them to stack as

CENTER
LEFT
RIGHT

Can I achieve this in Bootstrap? If yes, how?

bootstrap-4 css html
1 Answers

Since rows use flexbox, you can use the order utilities (order-md for the md break).

Here the base order is 2-1-3 and becomes 1-2-3 at md and above:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">

<div class="row">
  <div class="col-md-3 order-2 order-md-1"> LEFT </div>
  <div class="col-md-6 order-1 order-md-2"> CENTER </div>
  <div class="col-md-3 order-3 order-md-3"> RIGHT </div>
</div>

user_131383640
Related