我正在尝试仅为移动设备制作一个简单的页面。
有标题文本，然后在顶部显示文本，在底部显示文本，并在手机的图像上悬停这两个文本（在顶部和底部）。
我试图通过Twitter Bootstrap实现这一目标，但结果还不够好，也许是因为我根本不了解CSS中的溢出。
所以这就是我要实现的目标：http://i.imgur.com/ds2CC2m.png
在这里您可以看到发生了什么：http://plnkr.co/edit/t6w3MtoiD4KUuGe0mM10?p=preview
或者，您可以在此处检查很多难看的代码：
<style type="text/css">
.text p {
padding-left: 15px;
}
</style>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
</head>
<body>
<div style="position: relative;">
<div class="row" style="background-color:#E4F6FC;">
<div class="col-md-3" style="margin:10px">
<p>Logo</p>
</div>
</div>
<div class="row " style="background-color:#E4F6FC;">
<div class="col-md-3 " style="color:#00AAE3;width: 100%;padding-right:0;height: 100%;position:absolute;z-index: 11;top: 0;left: 0;margin-top: 15%">
<p>My</p>
<p>default</p>
<p>text</p>
</div>
<div class="col-md-3" style="padding:0;height: 100%;top: 0;left: 0;margin-top:-5%;float:right;z-index: 12;">
<img src="http://i.imgur.com/qYV93nS.png">
</div>
</div>
<div class="row">
<div class="col-md-3 text" style="padding-top:10px;padding-bottom:10px;color:#FFFFFF;background-color:#00AAE3;padding-right:0;height: 100%;top: 0;left: 0;z-index: 10;top: 0;left: 0;margin-top:-45%">
<p>and few</p>
<p>lines of great</p>
<p>lorem ipsum</p>
<p>here</p>
<button type="button" style="margin-left: 15px;border-radius: 20px;border-color: #FFFFFF;background: none;color:#FFFFFF;" class="btn">
AWESOME BUTTON
<i class="fa fa-angle-right"></i>
</button>
</div>
</div>
</div>
我为乱七八糟的道歉，以至于您已经看到并造成了眼睛的伤害：
最佳答案
两个建议：
1）使您想要的电话和文本在同一位置对齐：绝对对齐，这样它将始终留在同一位置。确保正确对齐Z轴，使手机位于顶部。
2）我认为您的问题必须解决您的col-md无法在智能手机上运行的事实！它仅适用于md或更高版本的屏幕。要影响小于749像素的屏幕，请使用col-sm和col-xs。
新的网格在12上工作，因此可以利用该网格来使您的行按所需的方式排列。例：
<div class="col-lg-2 col-md-1 col-xs-1"></div>
希望这能使您走上正确的道路-不确定要获得什么。