0
ブートストラップ3を使用すると、私はブラウザのサイズを変更すると、第3列が第2列と重なっているとわかりません。それはモバイルビューにきちんと積み重ねられますが、私はリサイズ状態で重複が発生しないようにしています。これをどうやって解決するのですか？ブラウザのサイズ変更時に第3列が第2列と重なっていますか？
HTML：
<div class="agent-banner">
<div class="container">
<div class="row">
<div class="col-md-6 col-xs-12">
<div class="widget">
</div>
</div>
<div class="col-md-3 col-xs-12">
<img itemprop="image" alt="name" src="https://hsl-pnw-downloadable-files.s3.amazonaws.com/7/6922202604004dcb8ba0fa88058c8075-width-300.jpg">
<h2>Name</h2>
<p class="designations">
<%= profile.designations %>
<button type="button" class="empty-btn" data-toggle="popover" data-trigger="focus" title="<%- theme_data.designation_pop_title %>" data-placement="top" data-content="<%- theme_data.designation_pop_msg %>"></button>
</p>
<h3>
Job title
</h3>
<a href="#">Visit Website</a>
</div>
<div class="col-md-3 col-xs-12">
<div id="map-container">
</div>
<p class="agent-address">
Address
</p>
<a href="#">View Map and Directions</a>
</div>
</div>
</div>
CSS：
#sem_page {
.visible-lg {
display: none !important;
}
.agent-banner h2 {
font-family: FranklinGothicDemi;
font-size: 26px;
margin-top: 20px;
}
.agent-banner h3 {
font-size: 18px;
margin-top: 5px;
margin-bottom: 20px;
font-family: FranklinGothicReg;
}
.agent-banner a {
font-family: FranklinGothicDemi;
}
#map-container {
background-color: #ddd;
height: 235px;
}
.agent-address {
padding: 25px 0;
}
.agent-banner {
padding: 90px 15px;
background-color: #f1f1f1;
}
.widget {
height: 350px;
background-color: #e1261c;
}
}