Вот решение;вам нужно будет просмотреть его в полном размере, а затем изменить размер окна до 480px, чтобы увидеть результат.Я включил медиа-запрос, чтобы решить ваш вопрос.Я также создал два новых содержащих div в вашем HTML, bluecol и redcol.
Элемент bluecol окружает синее изображение и его текст.float:left находится в медиа-запросе для текста div, чтобы выровнять его по левому краю при изменении размера.Сначала я помещаю текстовый код после изображения в коде, но затем текст сначала отображается на большом экране.Я удалил некоторые встроенные файлы начальной загрузки css и добавил несколько вновь созданных (коротких) пользовательских классов для достижения конечного результата.
Надеюсь, это поможет.
h1 {
text-align: center;
padding: 10px;
}
#abouttxt {
font-weight: normal;
font-size: 10pt;
line-height:1.4em;
margin-top:12px;
}
#logo {
width: 60%;
margin: 0 20%;
}
#abouttxt,
#logo {
display: inline-block;
}
.red {
width: 80%;
margin: 0 10%;
}
#bluecol,
#redcol {
display: block;
}
@media only screen and (min-width:480px) {
#abouttxt {
max-width: 50%;
font-weight: normal;
font-size: 10pt;
float: left;
}
#logo {
max-width: 40%;
margin: 5px 10px;
}
#abouttxt,
#logo {
display: inline-block;
vertical-align: top;
}
.red {
width: 40%;
margin-left: 52%;
}
#bluecol,
#redcol {
display: inline-block;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1 viewport-fit=cover">
<meta http-equiv="content-type" content="text/html" />
<title>Title</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<!-- Font Awesome CSS -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
<!-- Custom CSS -->
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
<div id="about" class="container">
<h1 class="text-center display-3 mb-4">About</h1>
<div class="row justify-content-center">
<div id="bluecol" class="col-xs-12 col-md-6">
<img id="logo" alt="Logo" src="https://via.placeholder.com/300/0000FF/808080?text=Logo" />
<section id="abouttxt">
<p class="btext">Metuentes igitur idem latrones Lycaoniam magna parte campestrem cum se inpares nostris fore congressione stataria documentis frequentibus scirent, tramitibus deviis petivere Pamphyliam diu quidem intactam sed timore populationum et caedium,
milite per omnia diffuso propinqua, magnis undique praesidiis conmunitam.
</p>
<p class="btext"> Quid enim tam absurdum quam delectari multis inanimis rebus, ut honore, ut gloria, ut aedificio, ut vestitu cultuque corporis, animante virtute praedito, eo qui vel amare vel, ut ita dicam, redamare possit, non admodum delectari? Nihil est enim
remuneratione benevolentiae, nihil vicissitudine studiorum officiorumque iucundius.</p>
</section>
</div>
<div id="redcol" class="col-xs-12 col-md-6">
<img class="red" class="mx-auto" src="https://via.placeholder.com/400x600/FF0000/FFFFFF?text=Image" alt="Main image">
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" 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>
</body>
</html>