CODEWITHSUNDEEP
htmlcssflexbox
james emanon
james emanon

Reputation: 11807

CSS Responsive two column with multi rows into one column

I'd link an image but I don't have an image gui program on this computer.

So, what is the best approach to get the following to happen. 

 COLUMN 1 title     COLUMN 2 TITLE
 COLUMN 1 PIES      COLUMN 2 SNEAKERS
 COLUMN 1 TIRES     COLUMN 2 GUITARS

And when the screen is minimized, it changes to the following structure.

 COLUMN 1 title     
 COLUMN 2 TITLE
 COLUMN 1 PIES      
 COLUMN 2 SNEAKERS
 COLUMN 1 TIRES     
 COLUMN 2 GUITARS

The columns basically zip up. What do you feel is the best approach here, to accomplish what I need? CSS is not my forte. Flex ordering?

Upvotes: 1

Views: 3143

Answers (2)

LKG
LKG

Reputation: 4192

You can try this in css, if you want to use css-flex

.box {
  display: flex;
  justify-content: center;
  flex-flow: row nowrap;
}

.part-1,
.part-2 {
  flex: 0 0 50%;
}

@media screen and (max-width:768px) {
  .box {
    flex-flow: column nowrap;
  }
}
<div class="box">
  <div class="part-1">
    COLUMN 1 title
  </div>
  <div class="part-2">
    COLUMN 2 TITLE
  </div>
</div>
<div class="box">
  <div class="part-1">
    COLUMN 1 PIES
  </div>
  <div class="part-2">
    COLUMN 2 SNEAKERS
  </div>
</div>
<div class="box">
  <div class="part-1">
    COLUMN 1 TIRE
  </div>
  <div class="part-2">
    COLUMN 2 GUITARS
  </div>
</div>

FIDDLE LINK

Upvotes: 2

Andres23Ramirez
Andres23Ramirez

Reputation: 657

As you are not an expert in CSS what I recommend is that you use a CSS framework such as bootstrap, it would be the easiest way to achieve what you want.

<div class="container">

  <div class="row">

    <div class="col-sm-6">
      <p>COLUMN 1 title</p>
      <p>COLUMN 1 PIES</p>
      <p>COLUMN 1 TIRES</p>
    </div>

    <div class="col-sm-6">
      <p>COLUMN 2 TITLE</p>
      <p>COLUMN 2 SNEAKERS</p>
      <p>COLUMN 2 GUITARS</p>
    </div>    

  </div>
</div>

Here you can find more information about your grid layout system: https://getbootstrap.com/docs/4.0/layout/grid/

Upvotes: 1

Related Questions