显示内联不适用于包含文本的div

Question

我正在创建一个在手机上使用的样式表，文本需要压缩成一列，而不是两个并排显示在桌面上。

我想知道我的问题是否与我应用于div的定位有关？

请看这个小提琴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

如果我理解正确，你希望这两列的行为就像它们在文本墙上一样，至少在较窄的屏幕上。然后解决方案是将＃col1，＃col2和.col内联并免除浮动。

#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>