Fluid 3-Column Layout in HTML & CSS -

i'm working basic 3-column layout, using html , css. columns float left, when resize width of window, columns gradually "collapse". i.e. first, col-3 collapse under col-1, col-2 collapse under col-1.

html:

<div id="col2">     <p>quick win face time goalposts wheelhouse mobile friendly. pixel pushing. on plate. who's responsible ask request?. <a href="">market-facing</a> drink firehose, or table discussion , need distributors evangelize new line local markets. baseline procedure , samepage department. in agreeance cross sabers timeframe, productize baseline procedure , samepage department. not long pole in tent not long pole in tent red flag.</p> </div>  <div id="col3">     <p>we need leverage our synergies three-martini lunch not long pole in tent, yet cloud strategy. killing stand on latest client ask curate sacred cow, drop-dead date herding cats. wanted give heads-up win-win-win ducks in row action item not enough bandwidth. closer metal don't want drain whole swamp.</p> </div> 

css:

body {     width: 90%;     max-width: 1000px;     margin: 0 auto; }  #col1, #col2, #col3 {     float: left;     width: 30%;     margin: 10px;     min-width: 200px; } 

what happen this. @ specified width, 3 columns collapse directly 1 column (col1 above col2 above col3), instead of them moving 1 @ time.

can done html & css, or language required? how accomplish this?

you can use

body {      width: 90%;      max-width: 1000px;      margin: 0 auto;  }  #col1, #col2, #col3 {      float: left;      width: 30%;      margin: 10px;      min-width: 200px;  }  @media (max-width: 768px) { /*set here specified width*/      #col1, #col2, #col3 {          width: 100%;      }  }

<div id="col3">      <p>3333we need leverage our synergies three-martini lunch not long pole in tent, yet cloud strategy. killing stand on latest client ask curate sacred cow, drop-dead date herding cats. wanted give heads-up win-win-win ducks in row action item not enough bandwidth. closer metal don't want drain whle swamp.</p>  </div>  <div id="col2">      <p>quick win face time goalposts wheelhouse mobile friendly. pixel pushing. on plate. who's responsible ask request?. <a href="">market-facing</a> drink firehose, or table discussion , need distributors evangelize new line local markets. baseline procedure , samepage department. in agreeance cross sabers timeframe, productize baseline procedure , samepage department. not long pole in tent not long pole in tent red flag.</p>  </div>  <div id="col3">      <p>we need leverage our synergies three-martini lunch not long pole in tent, yet cloud strategy. killing stand on latest client ask curate sacred cow, drop-dead date herding cats. wanted give heads-up win-win-win ducks in row action item not enough bandwidth. closer metal don't want drain whole swamp.</p>  </div>

here jsfiddle example play with

if content inside div#col text, not example recommend use: css3 multiple columns