Re-order cards in different columns on smaller screen sizes

Question

I currently have a 2 column webpage with 2 cards on the left and 4 cards on the right. When I view the page on a smaller screen (lg or below), the columns reshuffle, as designed, to stack the cards on the left on top of the cards on the right.

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
    <div class="col-xl-6 col-lg-12">
        <div class="card">XL-Left-1 LG&Below-1</div>
        <div class="card">XL-Left-2 LG&Below-4</div>
    </div>
    <div class="col-xl-6 col-lg-12">
        <div class="card">XL-Right-1 LG&Below-2</div>
        <div class="card">XL-Right-1 LG&Below-3</div>
        <div class="card">XL-Right-1 LG&Below-6</div>
        <div class="card">XL-Right-1 LG&Below-5</div>
    </div>
</div>

I would like to have the cards in a particular order once the screen size is "lg". How do I achieve this? The current layout is above, and I have put the order I would like the cards as "LG&Below"

Hope this makes sense!

You would have to place each card in separate column, than use the Bootstrap's push and pull classes, check [these examples](https://scotch.io/tutorials/reorder-css-columns-using-bootstrap). — skobaljic, Apr 27 '19 at 13:10
@skobaljic - as per below, I think this would destroy the formatting I have on xl screens as I'd effectively have to put every two cards on a different row would I not? I'd prefer not to have gaps in between the cards as they're all different heights.. — Luke Bateson, Apr 27 '19 at 13:39

score 0 · Answer 1 · answered Apr 27 '19 at 13:08

0

My attempt is having an nth order of rows with two col-sm-6 col-lg-12 contanners each

Like this:

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
   <div class="col-xl-6 col-lg-12">1</div>
   <div class="col-xl-6 col-lg-12">2</div>
</div>
<div class="row">
   <div class="col-xl-6 col-lg-12">3</div>
   <div class="col-xl-6 col-lg-12">4</div>
</div>
<div class="row">
   <div class="col-xl-6 col-lg-12">5</div>
   <div class="col-xl-6 col-lg-12">6</div>
</div>
<div class="row">
   <div class="col-xl-6 col-lg-12">7</div>
   <div class="col-xl-6 col-lg-12">8</div>
</div>

then have the cards inside the col-sm-6 col-lg-12 containers

answered Apr 27 '19 at 13:08

sassy_rog

1,077
12
30

That has the desired effect, however if box 1 is taller than box 2, then box 3 and 4 are both pushed down - I'd prefer for there not to be a gap between the boxes hence the current approach of two columns - is that still possible? – Luke Bateson Apr 27 '19 at 13:22
I think it is possible, checkout [this](https://stackoverflow.com/a/47456276/9172668) answer – sassy_rog Apr 27 '19 at 13:58
I don't think that works with what I'm trying to do here though, because I'm essentially wanting to order them differently based on screen sizes, so if I use card columns, I can't use your method above.. can I not? – Luke Bateson Apr 27 '19 at 14:18

score 0 · Answer 2 · answered May 02 '19 at 06:09

I would suggest not to use inline CSS styles, which has limited control on what we wanted to achieve based on screen sizes, please try using media queries with break points and have your customized CSS style class on it.

https://getbootstrap.com/docs/4.3/layout/overview/

Re-order cards in different columns on smaller screen sizes

2 Answers2