使用CSS和HTML响应式网格

Question

我一直在这个问题上好几个小时。

我在寻找使我的网站响应，我已经开始与移动第一，我正在为桌面创建它。

我的问题：

当我编辑平板电脑或台式机的.COL，列会回应，但他们不会在同一行。

当断点碰到桌面时，我希望我的图片位于菜单的右侧，内容位于图片的右侧。

我若

#menu{float:left} //under CSS desktop breakpoint 

的话，我会得到我想要的结果，但菜单会失去它的列宽。

https://jsfiddle.net/Lrtpjhh7/

有什么建议吗？我感觉自己好像处于正确的轨道上，但有些东西不起作用。

Answer 1

为了达到预期的结果，你需要：

1. 裹任何你想要显示的菜单附近的col-9包装内。
2. 将float:left加到您的[class^="col-"]。

这是您的fixed fiddle。