0

i want to move card 5 from 2nd column under card 1 of 1st columnwhen a specific breakpoint hit (probably on small screens).

i cant change the whole layout now, but this is required.!

<div class="container">
    <div class="row no-gutters">
        <div class="col-lg-6">
            <!-- Card 1 -->

            <!-- Card 2 -->

            <!-- Card 3 -->

            <!-- Card 4 -->

        </div>
        <div class="col-lg-6">
            <!-- Card 5 -->

            <!-- Card 6 -->

            <!-- Card 7 -->

        </div>
    </div>
</div>

This layout is designed this way, i have nested columns and cards inside each column placed perfectly.

NOTE: (The Other Way Around) if some how i can manage to remove 2nd column totally on a specific break point, I can then arrange each card with flex-box order. If only i can remove second column totaly with css or javascript on that specific breakpoint!

Any help Would Be Appreciated! :)

Arslan Ameer
  • 1,010
  • 16
  • 30
  • The documentation about ordering should help you solve this issue. https://getbootstrap.com/docs/4.3/layout/grid/#order-classes – RugerSR9 May 24 '19 at 16:55
  • Thank You @RugerSR9. But ordering is not a problem. i have clearly state that in my description. i can order every card only if they are in one single main column. My 4 cards are in first coloumn and remainig 3 cards are in 2nd. i want them in a single column after they reach a specific breakpoint – Arslan Ameer May 24 '19 at 17:10
  • 2
    Basically, **you can't.** You need an alternative layout method, perhaps CSS-Grid or use Javascript. At least until `display:contents` has wider adoption/support. – Paulie_D May 24 '19 at 17:26
  • https://stackoverflow.com/questions/34480760/is-it-possible-for-flex-items-to-align-tightly-to-the-items-above-them – Paulie_D May 24 '19 at 17:29
  • MD Bootstrap library is one option for drag and drop option with bootstrap - https://mdbootstrap.com/plugins/jquery/draggable/ – Naga Sai A May 24 '19 at 17:33
  • @Paulie_D: except edge its working on every other browser. and i am happy with it. it solves my dozens of problem now. Thank You. :) – Arslan Ameer Jun 13 '19 at 06:32

0 Answers0