Bootstrap 4 - Как я могу добавить пространство между переполненными столбцами

Question

Извините за ужасно сформулированный заголовок.Вот вопрос, который у меня есть: у меня есть строка с 4 столбцами, которая выглядит довольно хорошо на настольном компьютере ...

... но выглядит очень плохо на мобильном,потому что между переполненными столбцами нет поля.

Вот как я написал каждый столбец:

    <div class="col-md-3 col-sm-6">
        <h1><i class="fas fa-globe-americas"></i></h1>
        <h4>Boston, Massachusetts, United States of America</h4>
    </div>

Если не писать полностью отдельные сетки длякаждый размер экрана, есть ли способ, чтобы переполненные столбцы выглядели хорошо?Мне бы хотелось, чтобы между каждым столбцом было несколько пробелов.

Вот полный код CSS, на случай, если это поможет.

/* this CSS sheet applies to my home page 
I am using a color scheme from this fantastic article
https://www.canva.com/learn/100-color-combinations/
#375e97  rgba(55, 94, 151, 0.2) sky -- a deep blue
#fb6542  rgba(251,101,66,1) sunset -- a salmon color
#ffbb00  rgba(255,187,0,1) sunflower -- yellow
#3f681c  rgba(63,104,28,1) grass -- dark green
*/
body{
    font-size: 1rem;
    color:#3f681c;
    font-family: Kalam, sans-serif;
    background-color: #e2E8e4;
    line-height: 1.5;

}

a:hover{
    text-decoration:none;
}

hr{
    height:0.08rem;
    margin-bottom: 2rem;
    background-color: #3f681c;
    border-radius: 0.5rem;
}

.row__marginb{
    margin-bottom: 1rem;
}

.jumbotron{
    line-height: 2;
}

#mainJumbotron{
    height: 55vh;
    background-position: 50% 50%;
    background-size:cover;
    background-image:radial-gradient(rgba(55, 94, 151, 0.2), rgba(51, 107, 135, 0.0)), url("/static/home/img/august.jpg");
    border-radius: 0 0 1rem 1rem;
    clip-path: polygon(0% 0%, 100% 0%, 100% 92%, 92% 100%, 8% 100%, 0% 92%);
}

.nameTitle{
    font-family: Pacifico, serif;
    color:#fdf6f6;
    font-size: 5rem;
}

.mainSubtitle{
    font-family: Patua One, serif;
    color:#fdf6f6;
    font-size:1.5rem;
}

.profilepic{
    border-radius: 3rem;
}

.btn-socialmedia:link,.btn-socialmedia:visited{
    box-sizing:border-box;
    height:5rem;
    width:5rem;
    padding:0.4rem 0.6rem 0.3rem 0.6rem;
    border-radius:0.5rem;
    background-color: #3f681c;
    color:#fdf6f6;
    position:relative;
    bottom:0rem;
    transition: bottom 0.15s ease-in-out;
}

.btn-socialmedia:hover{
    color:#fdf6f6ec;
    bottom:0.2rem;
}

.btn-socialmedia:active{
    bottom:0.1rem;
}

.footer{
    color:#fdf6f6;
    background-image: radial-gradient(rgba(55, 94, 151, 1), rgb(10, 96, 139));
    padding-top:1rem;
    clip-path: polygon(8% 0%, 92% 0%, 100% 92%, 100% 100%, 0% 100%, 0% 92%);
}

.flagImage{
    height: 1.5rem;
    width: 2.2rem;
    border-radius: 0.2rem;
}

Вот соответствующий HTML

    <div class="row text-center row__marginb">
        <div class="col-md-3 col-sm-6">
            <h1><i class="fas fa-scroll"></i></h1>
            <div class="row">
                <div class="col-6">
                    <h5><a class="text-success" href="{% static 'home/handouts/JimmySbordone_Resume.pdf' %}"
                            download>Resume</a> </h5>
                </div>
                <div class="col">
                    <img class="flagImage" src="{% static 'home/img/america.png' %}">
                </div>
            </div>
            <div class="row">
                <div class="col-6">
                    <h5><a class="text-success" href="{% static 'home/handouts/JimmySbordone_CV.pdf' %}" download>CV</a>
                    </h5>

                </div>
                <div class="col">
                    <img class="flagImage" src="{% static 'home/img/america.png' %}">
                </div>
            </div>
            <div class="row">
                <div class="col-6">
                    <h5><a class="text-success" href="{% static 'home/handouts/JimmySbordone_CV_italiano.doc' %}"
                            download> CV</a> </h5>

                </div>
                <div class="col">
                    <img class="flagImage" src="{% static 'home/img/italy.png' %}">
                </div>
            </div>
        </div>
        <div class="col-md-3 col-sm-6">
            <h1><i class="fas fa-laptop"></i> </h1>
            <a class="btn-socialmedia" href="https://www.facebook.com/jsbordone" target="_blank"><i class="fab fa-facebook"></i></a>
            <a class="btn-socialmedia" href="https://www.linkedin.com/in/jimmy-sbordone-aaa806128/" target="_blank"><i
                    class="fab fa-linkedin-in"></i></a>
            <a class="btn-socialmedia" href="https://github.com/JimmySbordoneJr" target="_blank"><i class="fab fa-github"></i></a>
        </div>
        <div class="col-md-3 col-sm-6">
            <h1><i class="fas fa-envelope"></i> </h1>
            <h3>jsbordon@bu.edu</h3>
        </div>
        <div class="col-md-3 col-sm-6">
            <h1><i class="fas fa-globe-americas"></i></h1>
            <h4>Boston, Massachusetts, United States of America</h4>
        </div>
    </div>
</div>

Answer 1

Вы можете попробовать использовать, где max-width - это размер экрана

@media only screen and (max-width:435px){
  .col-sm-6{
  padding:1px;
  margin:1px;
 }
}

Answer 2

Используйте классы полей, например

mt-xs-2 для верхнего предела .5rem для медиа-запроса xs или просто mt-1 или mt-2 для любого медиазапроса.

 <div class="col-md-3 col-sm-6 mt-xs-2">
       <h1><i class="fas fa-globe-americas"></i></h1>
        <h4>Boston, Massachusetts, United States of America</h4>
 </div>

больше информации в https://getbootstrap.com/docs/4.2/utilities/spacing/