У меня небольшая проблема с моим сайтом. Я хочу адаптивный сайт, используя Bootstrap. В моей мобильной версии две колонки должны быть друг над другом, что сейчас правильно. Но в моей настольной версии колонки должны быть рядом друг с другом. Я думал, что col-md-6 - правильный способ сделать это, но что-то пошло не так ... Может кто-нибудь объяснить мне, что я делаю неправильно ??
body {
padding: 0;
margin: 0;
background: #f2f6e9;
padding-left: 20px;
}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.container {
margin-top: 20px;
font-family: 'Roboto', sans-serif;
}
.content {
margin-top: 30px;
}
.tekstgeel{
color: #d7a32d;
}
.tekstgroen{
color: #4a7b45;
}
.bold {
font-weight: bold;
}
.lijngeel{
height:4px;
width: 50px;
background-color: #d7a32d;
float: left;
margin-top: 10px;
}
img {
width: 100%;
}
.titel {
font-size: 15px;
text-transform: uppercase;
line-height: 18px;
}
p {
font-size: 12px;
}
#profielfoto {
width: 75%;
margin-top: 15px;
margin-bottom: 40px;
}
.titel {
font-size: 15px;
text-transform: uppercase;
line-height: 18px;
}
.ondertitel {
font-size: 13px;
text-transform: uppercase;
line-height: 16px;
margin-top: 15px;
margin-bottom: 15px;
}
@media only screen and (min-device-width: 768px) {
.titel {
font-size: 20px;
line-height: 23px;
}
.col-md-6 {
border:1px solid black;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Lotte Pothé</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="content">
<div class="row">
<div class="col-10 col-md-12">
<div class="col-12 col-md-6">
<h1 class="titel">Lotte Pothé<br>
Jouw grafisch ontwerper<br>
voor <span class="tekstgroen">digitaal en drukwerk</span></h1>
<span class="lijngeel"></span><br>
<h1 class="titel"><span class="tekstgeel">zakelijk en particulier</span></h1>
<p>Wil jij je onderscheiden met jouw bedrijf.?<br> Ik ben namelijk gek van enthousiaste personen en plannen, dus ik luister graag naar jouw verhaal en wensen.! Ik sta open voor allerhande projecten, zowel groot als klein, dus bij twijfel contacteer mij gerust. Ben je geïnteresseerd in een samenwerking of heb je eerst nog enkele vragen.?
</p>
<a href="contact.html"> <p><span class="tekstgroen bold">Laat van je horen.!</span></p></a>
</div>
<div class="col-12 col-md-6">
<img src="images/lotte.jpg" id="profielfoto" alt="Profielfoto Lotte Pothé">
</div>
</div>
</div>
</div>
</div>
</body>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</html>
Я поместил рамку вокруг .col-md-6, чтобы показать их ширину.
