display inline not working for divs containing text - html

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>