Question: I have 3 HTML div elements that I'd like to see sit side-by-side on a wide screen but, as the screen width collapses, I'd like to see them become vertical.

For example...

Wide screen:

```
-----------
abc def ghi
-----------

```

Narrow screen:

```
abc
def
ghi

```

Currently, having three HTML divs that look as follows (in another div block) only lays them out vertically...

```
<div id="Master_Div">
  <div id="Div_1">
    <p>abc</p>
  </div>
  <div id="Div_2">
    <p>def</p>
  </div>
  <div id="Div_3">
    <p>ghi</p>
  </div>
</div>

```

Maybe, the answer is tied to media queries and/or responsive design but I'm not sure.

Thanks for any help you can offer.

Answer: 
I would do something like this unless you actually need to apply an ID, classes are easier for multiple divs with one assignment in css, plus they take up less space.

```
html---
<div class="wrapper">
   <div class="third">Something here</div>
   <div class="third">Something here</div>
   <div class="third">Something here</div>
</div>

css---
.third {
    width: 33.333333%
    float:left;
}
@media screen and (max-width: 767px) {
.third {
    width: 100%;
    float:none;
}
}

```
A simple media query can do this.

```css
/* Apply inner styles if the viewport's width is at least 500px */
@media (min-width: 500px) {
  .responsive {
    width:33.3333%;
    float:left;
  }
}
```

```html
<div id="Master_Div">
  <div class="responsive" id="Div_1">
    <p>abc</p>
  </div>
  <div class="responsive" id="Div_2">
    <p>def</p>
  </div>
  <div class="responsive" id="Div_3">
    <p>ghi</p>
  </div>
</div>
```