display inline not working for divs containing text

Question

I'm creating a style sheet for use on mobiles and the text needs to be condensed down into one column, rather that the two that are displayed side by side on a desktop.

I'm wondering whether my issue has anything to doing the positioning that I have applied to the divs?

Please see this fiddle http://jsfiddle.net/vtdo8vc0/

#col1 {
  position: relative;
  display: inline;
  float: left;
  width: 94%;
  padding-right: 3%;
  padding-left: 3%;
}
#col2 {
  position: relative;
  display: inline;
  float: left;
  width: 94%;
  padding-right: 3%;
  padding-left: 3%;
}
.col {
  font-family: 'Avenir-Book';
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
}
#main_content {
  padding-left: 10px;
  padding-right: 10px;
  padding-bottom: 10px;
}
#main_content img {
  width: 100%;
  height: auto;
  padding-bottom: 30px;
}
#header {
  position: relative;
  padding-top: 3%;
  padding-left: 3%;
  padding-right: 3%;
  padding-bottom: 3%;
}
.header {
  font-family: 'Avenir-Book';
  font-size: 26px;
  line-height: 26px;
  text-transform: uppercase;
  font-weight: 900;
}

<div id="container">
  <div id="header">
    <div class="header">
      food
    </div>
  </div>
  <div id="col1">
    <div class="col">
      At Danny’s we believe food is very important! Kevin our Head Chef has a wealth of experience and a passion to rival that experience. Wherever possible our food is created using the very best locally sourced ingredients. Whether you are
    </div>
  </div>
  <div id="col2">
    <div class="col">
      popping in for a lunchtime wrap or a full blown Danny's Burger you can expect the same level of service and attention to detail.
      <br>
      <br>Check out our menu below.
    </div>
  </div>
  <div id="main_content">
    <img src="http://placehold.it/350x150" />
  </div>
</div>

Answer 1

If I understand correctly, you want the two columns to behave like they're ons wall of text, at least on narrower screens. Then the solution would be to make #col1, #col2 and .col inline and dispense with the floats.

#col1,
#col2 {
  position: relative;
  display: inline;
}
.col {
  display: inline;
  font: 500 12px/16px'Avenir-Book', sans-serif;
}
#main_content {
  padding: 0 10px 10px 10px;
}
#main_content img {
  width: 100%;
  height: auto;
  padding-bottom: 30px;
}
#header {
  position: relative;
  padding: 3%;
}
.header {
  font: 900 26px/26px'Avenir-Book', sans-serif;
  text-transform: uppercase;
}
@media all and (min-width: 50em) {
  /* change into 2 columns on wider screens */
  #col1,
  #col2 {
    display: block;
    float: left;
    width: 47%;
    padding: 0 3%;
    box-sizing: border-box;
  }
}

<div id="container">
  <div id="header">
    <div class="header">
      food
    </div>
  </div>
  <div id="col1">
    <div class="col">
      At Danny’s we believe food is very important! Kevin our Head Chef has a wealth of experience and a passion to rival that experience. Wherever possible our food is created using the very best locally sourced ingredients. Whether you are
    </div>
  </div>
  <div id="col2">
    <div class="col">
      popping in for a lunchtime wrap or a full blown Danny's Burger you can expect the same level of service and attention to detail.
      <br>
      <br>Check out our menu below.
    </div>
  </div>
  <div id="main_content">
    <img src="http://placehold.it/350x150" />
  </div>
</div>