0

I'm using the http://flexboxgrid.com framework.

I want the columns to be horizontal on desktop but stack on mobile and responsively.

Example (Desktop):

enter image description here

Example (Mobile):

enter image description here

<div class="row">
    <div class="col-xs">
        <div class="box">1</div>
    </div>
    <div class="col-xs">
        <div class="box">2</div>
    </div>
    <div class="col-xs">
        <div class="box">3</div>
    </div><div class="col-xs">
        <div class="box">4</div>
    </div>
</div>

Here's a JSFiddle that demonstrates what I am saying.

https://jsfiddle.net/RohitTigga/mfv622rt/

How exactly does one stack divs for each column inside the row on a smaller screen or mobile?

Is that not possible with the framework?

Rohit Tigga
  • 2,373
  • 9
  • 43
  • 81
  • Looks like the framework doesn't have a built in way to do this, pretty easy to do if you don't mind a bit of custom CSS though. – Gerrit0 Feb 26 '17 at 21:24

2 Answers2

1

I know I'm 2 years delay (haha) but the goal is to define the amounts of columns for the resolutions you need. Flexbox is defined using 12 columns, so to achieve your example, you need to do something like this.

<div class="row">
    <div class="col-xs-12 col-lg-3">
        <div class="box">1</div>
    </div>
    <div class="col-xs-12 col-lg-3">
        <div class="box">2</div>
    </div>
    <div class="col-xs-12 col-lg-3">
        <div class="box">3</div>
    </div>
    <div class="col-xs-12 col-lg-3">
        <div class="box">4</div>
    </div>
</div>

Every div that contains the box class is defined to get the 12 columns in the mobile version. But for lg resolutions they get equally 3 columns. To define the resolution you want to use, you can always go to Bootstrap to confirm.

Juan Slinger
  • 21
  • 1
0

In order to use Flexbox, you need to make your container into a flex container and also set a min-width to the box divs.

.row {
  display: flex;
  flex-direction: row;
}

.box {
  min-width: 40px;
}

https://jsfiddle.net/abstraktion/mfv622rt/3/

Eric Hosford
  • 11
  • 2