Hallo,
ich habe mit Bootstrap 3 drei DIV Container, wobei bis Browserbreite 991 Pixel die ersten beiden in der ersten Reihe und der dritte in der nächsten Reihe stehen soll. Ab 992 Breite sollen alle drei Container in einer Reihe stehen. Dabei sollen sich die Höhen der Container je Reihe am Höchsten ausrichten.
Mein Beispiel funktioniert mit dem Chrome auch so, wie es haben möchte. Jedoch mit dem Safari auf macOS und iOS leider nicht. Im Safari werden bei Browser kleiner 992px die beiden Container untereinander statt nebeneinander dargestellt.
Ich hoffe es ist verständlich formuliert und hier der Code:
Code
<div class="container">
<div class="row">
<div class="col-xs-6 col-md-4">
<div class="inner-container">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut</p>
</div>
</div>
<div class="col-xs-6 col-md-4">
<div class="inner-container">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. AtLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At</p>
</div>
</div>
<div class="col-xs-12 col-md-4">
<div class="inner-container map">
<p>map</p>
</div>
</div>
</div>
</div>Code
.inner-container{
background-color: #fff;
padding: 10px;
font-size: 16px;
height: 100%;
}
@media (max-width: 991px) {
.map{
height: 250px;
margin-top: 15px;
}
.row{
display: flex;
flex-wrap: wrap;
}
}
@media (min-width: 992px) {
.row{
display: flex;
}
}teccrow
