Three-column horizontal adaptable div

In the style sheet you will have to define the properties of the div twice. One for when the width is less than one specified, and another for when it is greater.

    div div { border: solid;
              width: 30%; 
              height: 400px;
              margin: 1%;
              float: left; }

    @media screen and (max-width: 720px) {
        div div { border: solid;
                  width: 90%; 
                  height: 400px;
                  margin: 5%; }
                }

The first will give you a width of 30% of the screen and will align them when the width is greater than 720 pixels (in this case), and the second will give a width of 90% of the screen to each div, placing them one below the other in case the width is smaller.

Anyway, bookstores like Bootstrap will make the work much easier, since you do not have to define any rule, it does it alone.

I would recommend that you evaluate using a responsive library like bootstrap

55+ Best Free and Premium CSS Pricing Tables

3 Column Responsive Layout

You will see that there are many design alternatives using predesigned bootstrap template, such as

the image is just one of several that you have to choose from.

Or you can create something more custom if you do not want a whole template

Bootstrap 3.0. Simple Pricing

What you want to do can be achieved through media queries :

  

A media query consists of a type of media and at least one query that limits style sheets using media characteristics such as width, height and color. It is understood as a CSS3 module that allows to adapt the representation of the content to characteristics of the device. Added in CSS3, media queries let content presentation adapt to a specific range of output devices without having to change the content itself.

Media queries execute CSS code if two conditions are met:

• Screen type (optional)
• Additional restrictions (optional) that may be of size, color, resolution, etc.

and its syntax is simple:

@media [tipo-de-pantalla] [(restricción-adicional)] {

    /* estilos que se aplicarán sólo para esa pantalla si cumple al restricción de tamaño*/

}

An example using media queries would be like this:

.columna {
  width:33%;
  float:left;
}

@media (max-width: 500px) {
  
  .columna {
    width:auto;
    float:none;
  }
  
}

<div class="columna">Columna1</div>
<div class="columna">Columna2</div>
<div class="columna">Columna3</div>

In the code above, 3 columns will be displayed (class .columna has width 33%) unless the page has less than 500 pixels, in which case three lines will be shown (automatic width and% is removed) float ). To see the effect you will have to click on the "Full screen" button and change the size of the browser.

Alternatively, if you use a library such as Bootstrap , this will simplify everything (although it will also force you to adjust to its predefined sizes). In that case you can use the class .row and combine them with col-[tamaño]-[columnas] where [columnas] is a number from 1 to 12, and tamaño can be:

• xs ( col-xs-* ): extra small, for mobile screens
• sm ( col-sm-* ): small, for tablet
• md ( col-md-* ): medium, for small computer screens / with low resolution
• lg ( col-lg-* ): large, for large computer screens / with high resolution

Then, using Bootstrap, the code would be simpler:

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

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

Flexbox and media queries, ideal to learn it.

Flexbox is very versatile, here you have a complete guide. Combined with media queries , you can switch from row to column when crossing a certain screen width. Since you are learning, these are two fundamental pillars of web development today.

Keep in mind that Flexbox is a relatively new feature. According to Can I Use , 95.74% of browsers support it.

The example below, when expanded to "[Full Page]" is seen as columns instead of rows. The limit is adjusted by modifying the media query .

.container {
  /* Por defecto en modo fila, uno al lado del otro */
  display: flex;
  flex-flow: row;
}

.item {
  flex: 1 1 auto;  
}

@media (max-width: 750px) {
  .container {
    /* si es muy angosta, uno debajo del otro */
    flex-flow: column;
  }
}

.rojo {
  background-color: red;
}
.verde {
  background-color: green;
}
.azul {
  background-color: blue;
}

<div class="container">
  <div class="item rojo"><h1>Tarjeta Roja</h1></div>
  <div class="item verde"><h1>Tarjeta Verde</h1></div>
  <div class="item azul"><h1>Tarjeta Azul</h1></div>
</div>