Html 引导divs don'；当页面最小化时，不要排队

这就是我所拥有的：。我在这里添加了媒体查询：，这并不太糟糕，但我知道必须有更好的方法。我尝试使用Bootstrap的clearfix类，但这并没有改变任何事情。这是该部分的代码：

html:

---

这里有一个例子，你可以让这个手机第一，并可能给你一个基地，以适应你的需要

我（个人）会避免将类/ID与结构元素（如容器/行/列）混合，而不是纯粹的样式（即颜色、文本等），因为这会影响网格的设计操作。但是，您可以将内容放在这些列中，从而获得更好的结果（一般来说）

有一个固定的

宽度

，因为这是不必要的，所以我删除了它，并将所有内容都放在行/列中，而不是合并它们：

#brkSesDiv {
  margin: 30px 0 0 0;
  height: 100px;
  width: 350px;
  margin: auto;
}

请参阅工作示例代码段

var-sec=0；
var-min；
var-breakLenCount=5；
var sesLenCount=25；
无功中断定时器；
var timerRunning=错误；
$（文档）.ready（函数（）{
$（'#plus1'）。单击（函数（）{
如果（breakLenCount<9）{
$（'#breakLen'）.html（'0'+（breakLenCount+=1））；
}否则{
$（'#breakLen'）.html（breakLenCount+=1）；
}
});
$（'#minus1'）。单击（函数（）{
如果（breakLenCount<9）{
$（'#breakLen'）.html（'0'+（breakLenCount-=1））；
}否则{
$（'#breakLen'）.html（breakLenCount-=1）；
}
});
$（'#plus2'）。单击（函数（）{
如果（倍计数<10）{
$（'#sesLen'）.html（'0'+（sesLenCount+=1））；
$（'#min'）.html（sesLenCount）；
}否则{
$（'#sesLen'）.html（sesLenCount+=1）；
$（'#min'）.html（sesLenCount）；
}
});
$（'#minus2'）。单击（函数（）{
如果（sesLenCount<11）{
$（'#sesLen'）.html（'0'+（sesLenCount-=1））；
$（'#min'）.html（sesLenCount）；
}否则{
$（'#sesLen'）.html（sesLenCount-=1）；
$（'#min'）.html（sesLenCount）；
}
});
最小值=倍数；
秒=0；
$（“#计时器”）。单击（函数（）{
如果（定时）{
清除间隔（SESSTIMER）；
timerRunning=false；
返回；
}否则{
sesTimer=设置间隔（时间，1000）；
}
});
功能时间（）{
timerRunning=true；
第二节；
如果（秒<00）{
秒=59；
闵--；
}
如果（第10节）{
秒='0'+秒；
}
如果（最小值<1和秒<1）{
timerRunning=false；
清除间隔（SESSTIMER）；
最小值=中断计数；
$（'#min'）.html（min）；
$（#sec'）.html（00）；
b定时器=设置间隔（中断定时器，1000）；
}
$（'#min'）.html（min）；
$（'#sec'）.html（sec）；
}
函数breakTimer（）{
第二节；
如果（秒<00）{
秒=59；
闵--；
}
如果（第10节）{
秒='0'+秒；
}
如果（最小值<1和秒<1）{
净空间隔（bTimer）；
最小值=倍数；
$（'#min'）.html（min）；
$（#sec'）.html（00）；
设置间隔（时间，1000）；
}
$（'#sec'）.html（sec）；
$（'#min'）.html（min）；
}
});
正文{
字体系列：Arial，无衬线；
}
h1#pTimer{
字号：5em；
}
h1.标题{
字号：4em；
颜色：#4444；
文本阴影：3px 3px 5px；
}
#布克塞斯迪夫{
填充顶部：10px；
}
#布雷克迪夫{
显示：内联；
}
#布雷克伦{
显示：内联；
}
#塞斯伦{
显示：内联；
}
普鲁斯米努斯先生{
边界半径：25%；
边框：1px实心透明；
背景色：透明；
颜色：#444；
字号：2.5em；
字体大小：粗体；
}
#计时器{
保证金：25px自动0自动；
宽度：300px；
高度：300px；
边框：3px实心#444；
边界半径：50%；
盒影：0px 0px 25px；
背景色：#fff；
光标：指针；
显示：表格；
垂直对齐：中间对齐；
}
#时间{
显示：表格单元格；
垂直对齐：中间对齐；
}
@介质（最大宽度：480px）{
h1#pTimer{
字号：2.5em；
}
h1.标题{
字号：2em；
}
#计时器{
保证金：10px自动0自动；
宽度：175px；
高度：175px；
}
}

波莫多罗计时器
+
05
-
断裂长度
+
25
-
会话长度
一场
25:00
谢谢@vanburen的帮助。我没意识到从col-md-6改为col-xs-6会有这么大的不同。谢谢你的其他建议。没问题，很高兴我能帮上忙。如果解决方案有效，请将其标记为已回答，以便将其从队列中删除，从而对其他人更有帮助。
#brkSesDiv {
  margin: 30px 0 0 0;
  height: 100px;
  width: 350px;
  margin: auto;
}
#breakDiv {
  display: inline;
}
#breakLen {
  display: inline;
}
#sesDiv {
  float: left;
}
#sesLen {
  display: inline;
}

#brkSesDiv {
  margin: 30px 0 0 0;
  height: 100px;
  width: 350px;
  margin: auto;
}