CODEWITHSUNDEEP
htmlcss
Tudor Draghici
Tudor Draghici

Reputation: 11

How to split a div in two separate rows

Im trying to make an website to be responsive and i have a section with 6 divs that contains an icon and some text. In mobile mode, those 6 div's are in flex-direction: column but on tablet/desktop mode using @media, I am trying to display 3 divs on one row, and then the next 3 divs on another row so they can fit but I cannot quite find a way of doing this without screwing my icons or texts. The HTML code is something like this :

<section id="contact">
  <div class="container">
    <div>
      <h1>text</h1>
    </div>
    <div class="items">
      <div class="item">
        <div class="icon">
          <a href="#"><img src=""></a>                    
        </div>
        <div class="info">
          <h1></h1>
        </div>
      </div>

I have 6 divs with item class and I want to display the first 3 div's class="item" on one row and the other 3 on the next line. Can you please help me ?

Upvotes: 1

Views: 2533

Answers (1)

Kareem Kamal
Kareem Kamal

Reputation: 1048

something like this should do, 1 item per column on mobile, 3 per column beyond 450px, also grid can do this.

.flex-container {
  display: flex;
  flex-direction: column;
}

.item {
  background-color: #333;
  border: 1px solid #fff;
  height: 200px;
}

@media (min-width: 450px) {
  .flex-container {
    flex-direction: row;
    flex-wrap: wrap;
  }
  
  .item {
    flex: 0 0 33%;
  }
}
<div class="flex-container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

Upvotes: 2

Related Questions