Сделайте 3 divs отзывчивыми без медиазапроса

Question

Я пытаюсь сделать 3 divs отзывчивыми, т.е. на рабочем столе эти div находятся в строке, и я хочу отобразить их в виде столбца в мобильном представлении. Я использую flexbox.

Я пробовал это

.outerdiv{
        display: flex;
        justify-content:space-around;
        padding:0;
        flex-wrap: wrap;
        margin:0;
        align-content:center;
        text-align:center;
 }

  .innerdiv{
         maxWidth: 24.296875%;
        height: auto;
        paddingLeft:auto;
        float:left;
        left:10px;
        flex: 1;
        flexWrap: wrap;
        background: #e3e3e3;
  }

     <div class="outerdiv">
     <div class="innerdiv">1</div>
     <div class="innerdiv">2</div>
     <div class="innerdiv">3</div>
     </div>
    

Я хочу сделать это без медиазапроса. Кто-нибудь может мне помочь? спасибо.

Answer 1

Мой самый простой ответ без медиазапросов с использованием flexbox:

.wrapper {
  width: 100vw; /*set the size of container*/
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

.item {
  max-width: 250px; /*set max width of item*/
  min-width: 200px; /*set min width of item*/
  height: 150px;
  box-sizing: border-box;
  background-color: red;
  margin: 2rem;
  flex: 1;
}

<div class="wrapper">
  <article class="item"></article>
  <article class="item"></article>
  <article class="item"></article>
</div>

Answer 2

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="outerdiv">
  <div class="innerdiv col-xs-12 col-sm-12 col-md-4">1</div>
  <div class="innerdiv col-xs-12 col-sm-12 col-md-4">2</div>
  <div class="innerdiv col-xs-12 col-sm-12 col-md-4">3</div>
<div>

Использование Bootstrap Gridsystem

Answer 3

вы можете использовать так:

<main class="wrapper">

  <section class="breweries" id="breweries">
    <ul>
      <li>
        <figure>
          <!-- Photo by Quentin Dr on Unsplash -->
          <img src="https://images.unsplash.com/photo-1471421298428-1513ab720a8e" alt="Several hands holding beer glasses">
          <figcaption><h3>Billions upon billions</h3></figcaption>
        </figure>
        <p>
          Made in the interiors of collapsing stars star stuff harvesting star light venture billions upon billions Drake Equation brain is the seed of intelligence?
        </p>
        <a href="#">Visit Website</a>
      </li>
      <li>
        <figure>
          <!-- Photo by Drew Farwell on Unsplash -->
          <img src="https://images.unsplash.com/photo-1513309914637-65c20a5962e1?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3450&q=80" alt="Several friends doing a toast">
          <figcaption><h3>Drake Equation</h3></figcaption>
        </figure>
        <p>
          Another world citizens of distant epochs from which we spring descended from astronomers Orion's sword shores of the cosmic ocean.
        </p>
        <a href="#">Visit Website</a>
      </li>
      <li>
        <figure>
          <!-- Photo by Rawpixel on Unsplash -->
          <img src="https://images.unsplash.com/photo-1535359056830-d4badde79747?ixlib=rb-1.2.1&auto=format&fit=crop&w=3402&q=80" alt="Three different glasses of beer">
          <figcaption><h3>Vast cosmic arena</h3></figcaption>
        </figure>
        <p>
          Galaxies the ash of stellar alchemy prime number science inconspicuous motes of rock and gas brain is the seed of intelligence.
        </p>
        <a href="#">Visit Website</a>
      </li>
    </ul>
  </section>
</main>

ИСПОЛЬЗОВАТЬ Это CSS

<style type="text/css">
        /* Typography imported from Google Fonts */

/* Generic styles */
html {
  scroll-behavior: smooth;
}

a {
  background-color: goldenrod;
  text-decoration: none;
  color: white;
  border-radius: .25rem;
  text-align: center;
  display: inline-block;
  transition: all .3s;
}

a:hover {
  opacity: .6;
}

li{list-style: none;}


/* breweries styles */
.breweries {
  padding: 2rem;
}

.breweries > ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  grid-gap: 1rem;
}

.breweries > ul > li {
  border: 1px solid #E2E2E2;
  border-radius: .5rem;
}

.breweries > ul > li > figure {
  max-height: 220px;
  overflow: hidden;
  border-top-left-radius: .5rem;
  border-top-right-radius: .5rem;
  position: relative;
}

.breweries > ul > li > figure > img {
  width: 100%;
}

.breweries > ul > li > figure > figcaption {
  position: absolute;
  bottom: 0;
  background-color: rgba(0,0,0,.7);
  width: 100%;
}

.breweries > ul > li > figure > figcaption > h3 {
  color: white;
  padding: .75rem;
  font-size: 1.25rem;
}

.breweries > ul > li > p {
  font-size: 1rem;
  line-height: 1.5;
  padding: 1rem .75rem;
  color: #666666;
}

.breweries > ul > li > a {
  padding: .5rem 1rem;
  margin: .5rem;
}


    </style>

Answer 4

использовать flex-direction в медиазапросах

.flex-container {
  display: flex;
  background-color: DodgerBlue;
}

.flex-container > div {
  background-color: #f1f1f1;
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}

@media screen and (min-width: 481px) {
.flex-container {
  flex-direction: row;
}

}

@media screen and (max-width: 480px) {
.flex-container {
  flex-direction: column;
}

}

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>  
</div>