Бутстрэп Колонны Заказать

Question

Итак, у меня есть раздел нижнего колонтитула на веб-сайте, который я сейчас создаю, и проблема заключается в порядке их отображения.Я хочу, чтобы иконки социальных сетей были выше ©

Посмотрите: нижний колонтитул

html:

<div id="footerbot">
<div class="container">
    <div class="row">
        <div class="col-md-6">
            <h5 class="fbh">&copy;2018 - Appo, All Right Reserved</h5>
        </div>
        <div class="col-md-6">
            <a href="#"><img src="img/facebook.png"  href="#"></a>
            <a href="#"><img src="img/twitter.png"  href="#"></a>
            <a href="#"><img src="img/dribble.png" href="#"></a>
            <a href="#"><img src="img/gplus.png" href="#"></a>
            <a href="#"><img src="img/youtube.png" href="#"></a>
        </div>
    </div> <!-- end of row -->
</div>

css:

#footerbot {
background-color: rgba(34, 48, 71, 0.8);
}
#footerbot img {
display: block;
float: right;
top: 50%;
padding-top: 35px;
padding-left: 15px;
}
#footerbot h5 {
color: #00FFF0;
line-height: 100px;
}

Я пытался добавить класс 'order-md-6' к каждому div с помощью col-md-6, но, во-первых, он не работал, а во-вторых, он сломал макет - он нажал'оба элемента в центре.Это вообще возможно в bootstrap4?У меня также есть проблема с центрированием этих элементов, которые вы можете увидеть на загруженном мной изображении.Я борюсь с этим в течение 2 часов, и я понятия не имею, как это сделать.Буду признателен за любую помощь.Спасибо

Answer 1

Bootstrap 4 использует flexbox , чтобы расположить столбцы в их строках, чтобы вы могли добавить к своему CSS следующие элементы для элемента управления order столбцов:

.col-md-6:last-child {
  order: -1;
}

Answer 2

Не уверен, что вы указали полный пример кода нижнего колонтитула или нет, но если это ваш полный HTML-код, у вас отсутствует закрывающий тег.

Кроме того, при условии, что вам нужны только значкичтобы перейти выше линии авторского права и по центру, попробуйте это:

#footerbot .socialIcons {
  text-align: center;
}

<div id="footerbot">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div class="socialIcons">
                                <a href="#"><img src="img/facebook.png"  href="#"></a>
                <a href="#"><img src="img/twitter.png"  href="#"></a>
                <a href="#"><img src="img/dribble.png" href="#"></a>
                <a href="#"><img src="img/gplus.png" href="#"></a>
                <a href="#"><img src="img/youtube.png" href="#"></a>
                </div>
                <h5 class="fbh">&copy;2018 - Appo, All Right Reserved</h5>
            </div>

        </div> <!-- end of row -->
    </div>
    </div>