How to reorder elements using bootstrap 4? : <p>I have a simple section in which I want to display nested elements using bootstrap.</p>

<p>Here is what I have so far</p>

<p>HTML ;</p>

<pre><code>&lt;div class="container"&gt;
    &lt;div class="row d-flex d-lg-block"&gt;
         &lt;div class="col-lg-8 order-1 float-left"&gt;
            &lt;div class="card card-body tall"&gt;2&lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="col-lg-4 order-0 float-left"&gt;
            &lt;div class="card card-body"&gt;1&lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="col-lg-4 order-1 float-left"&gt;
            &lt;div class="card card-body"&gt;3&lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>This give me this result</p>

<p>desktop version</p>

<pre><code>--------- ------
|   2   ||  1  |
|       ||     |
|       |-------
|       ||  3  |
|       ||     |
|       |-------
|       |
|       |
---------
</code></pre>

<p>No I want the same but reversed , something like this</p>

<pre><code>  --------- ---
    |  1  | | 2 |
    |     | |   |
    ------- |   |
    |  3  | |   |
    |     | |   |
    ------- |   |
            -----
</code></pre>

<p>mobile version (stacked in order) like this</p>

<pre><code> --------
    |  1   |
    |      |
    --------
    |  2   |
    |      |
    |      |
    |      |
    |      |
    |      |
    --------
    |  3   |
    |      |
    --------
</code></pre>

<p>I tried to use <code>float-right</code> but unfortunately, it's not working</p>

<p>what do I need to change to get what I want?</p>
