'Responsive layout ordering with Bootstrap 4

I have a page with a Bootstrap layout like this:

<div class="row">
   <div class="col-md-6">
       content
   </div>
   <div class="col-md-6">
       content A
       content B
   </div>
</div>

so that on larger screens, it looks like this:-

-----------------------
| content | content A |
|         | content B |
-----------------------

but on smaller screens, it looks like this:-

-------------
| content   |
| content A |
| content B |
-------------

How would I go about making that "content A" section appear at the very top on small screens, like this:-

-------------
| content A |
| content   |
| content B |
-------------

whilst keeping the larger version the same as above?

htmlcsstwitter-bootstrapbootstrap-4


Solution 1:[1]

Please use this HTML structure

<div class="row">
    <div class="col-md-6 d-none d-sm-none d-md-block">
        content
    </div>
    <div class="col-md-6">
        <div>
        content A
        </div>
        <div class="d-block d-sm-block d-md-none">
            content
        </div>
        <div>
        content B
        </div>
    </div>
</div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Dave

Related Questions