html（bootstrap）列和div allignment

Question

所以我正在使用bootstrap为响应式网站开发html / css网站。现在我谈到了一点，我不知道该怎么做。

我有这个HTML：

＆＃13;

＆＃13;

#email_sub{
	margin:0 auto;
	background: #15b4dc;
	color:fff;
	border: 0px solid white;
	padding-top:10px;
	padding-bottom:10px;
	font-size: 100%;
}

#email_pt1{
	float:left;
	color:#fff;
    display: inline-block;
	border: 1px solid white;
	position:relative;
	width:100%;
	padding-top:4px;
	padding-bottom:5px;
	padding-left:2%;
	padding-right:2%;
}
#email_pt1 .form-inline input.form-control{width:70%;}

.emailbtn{position:absolute; right:0px; bottom:0;}


#email_pt2{
	float:right;
	border: 1px solid white;
	padding-top:0px;
	margin:0, auto;
	width:100%;
}

＆＃13;

<!--email sub bar-->
<div id="email_sub">
	<div class="container">
		<div class="row">
			<div class="col-sm-6">
				<div id="email_pt1">
					<form class="form-inline" role="form">
						<!--form gorup-->
							<label for="email">Order news </label>
							<input type="email" class="form-control" id="email" placeholder="Vnesite vaš email...">
						<!--end-->
						<button type="submit" class="emailbtn btn-default">SUBMIT</button>
					</form>
				</div>
			</div>
			<div class="col-sm-3">
				<div id="email_pt2">
					<!--col2-->

				</div>
			</div>
			<div class="col-sm-3">
				<div id="email_pt3">
					<!--col2-->
				</div>
			</div>
		</div>
	</div>
</div>

＆＃13;

＆＃13;

＆＃13;

我想让第2和第3列看起来像这样：

所以左边是方形图片，旁边是两行文字。我怎么能让它看起来像那样？

Answer 1

我认为这就是你想要的https://jsfiddle.net/kh0prtc4/4/？

将<div class="col-sm-3">更改为<div class="col-sm-6">

Answer 2

只需在另一行内添加：

<div class="row">
    <div class="col-sm-4">
        <img class="img-responsive"/>
    </div>
    <div class="col-sm-8">
        Text text<br/>
        text text
    </div>
</div>