在bootstrap 4中的多列容器中创建一个响应式双列，居中<ul>，左对齐<li>，FA图标为“项目符号”

Question

我在创建一个居中的无序列表时遇到了困难，该列表在多列容器中保留了对齐的列表项。此列表还应该将FA图标作为“项目符号”，并且应该从与其上方的“荣誉和奖励”部分的图标垂直对齐，并且应向右扩展以用尽可用空间。我还希望它具有响应性，以便当屏幕尺寸变小时，多列之间的间距会减小。我不知道桌子会不会更好呢？

我当前的代码：

@import url('https://fonts.googleapis.com/css?family=Nunito:400,700,800|Open+Sans:400,700,800');
html,
body {
  height: 100%;
  //width: 100%;
  min-width: 300px;
  margin: 0px;
  padding: 0px;
  font-family: 'Open Sans', sans-serif !important;
}

.navbar {
  font-family: 'Nunito', sans-serif !important;
}

h1,
h2,
h3,
h4,
{
  font-family: 'Open Sans', sans-serif !important;
  font-weight: 400
}

h5,
h6 {
  font-family: 'Nunito', sans-serif !important;
  font-weight: 800;
}

.inlineFontChange {
  display: inline;
}


/*.progress{
      flex-direction: row;
    }
    */

.ulCenter {
  display: flex;
  justify-content: center;
}

p {
  text-align: justify;
  color: #3B424C;
}

#profilePic {
  margin-left: 20px;
  margin-top: 28px;
  margin-bottom: 10px;
  float: right;
}

@media only screen and (max-width: 480px) {
  #profilePic {
    float: none;
    margin: 0 auto;
    justify-content: center;
    display: block;
  }
}

// .navbar{
// background-color: #3B424C; //This is the color of the actual background; navbar-dark-color is the link color!
//background:none !important;
// width: 100%;
// }
.jarallax {
  position: relative;
  z-index: 0;
}

.jarallax>.jarallax-img {
  position: absolute;
  object-fit: cover;
  /* support for plugin https://github.com/bfred-it/object-fit-images */
  font-family: 'object-fit: cover;';
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}


/* Help from: https://free.nkdev.info/jarallax/*/

.overlay {
  display: table;
  width: 100%;
  height: 75vh;
  background-color: rgba(190, 190, 190, 0.6);
}

@media only screen and (max-height: 740px) {
  .overlay {
    height: 100vh;
  }
}

.overlay-cell {
  position: absolute;
  left: 0;
  //top: 35%;
  top: 34%;
  width: 100%;
  text-align: center;
}

.heroSection {
  height: 100vh; //Controls the height of the Hero
}

.subSection {
  height: 300px; //Controls the height of the subsection jarallax
  margin: 0;
}

#baseNav {
  //font-family: 'Yantramanav', sans-serif;
  //font-weight: 700;
  //font-size: 20px;
  list-style-type: none;
  margin: 0;
  padding: 0;
  //overflow: hidden;
  //background-color: #3b424c;
  position: fixed;
  top: 0;
  width: 100%;
  transition: all 200ms ease-in-out;
}

#baseNav.hide {
  transform: translateY(-100%);
}

.navbar {
  top: 0;
  margin: 0;
  position: fixed; //THIS IS KEY! IN ORDER TO GET NAV OVER PICTURE
  width: 100%
}

.navbar-nav .nav-link {
  font-size: 1.2rem;
  font-weight: bold;
  @media (max-width: 34em) {
    font-weight:normal;
  }
  .navbar-nav .nav-item {
    padding: 0 1rem;
    @media(max-width: 34 em) {
      padding: 0;
    }
  }
}

.navbar-toggler {
  cursor: pointer;
}

// This adjusts the Main Menu and Dropdown (submenu) colors
$bgMain: rgba(59,
66,
76,
0); // This color '0' at the end is for transparency for navbar hiding
$bgDropdown: rgba(59,
66,
76,
1);
$bgHighlight: hsl(184,
85%,
43%);
$colDefault: #ffffff;
$colHighlight: #95ce33;
$dropDown: true;
.navbar {
  background-color: $bgMain;
  .navbar-brand {
    color: $colDefault;
    &:hover,
    &:focus {
      color: $colHighlight;
    }
  }
  .navbar-text {
    color: $colDefault;
  }
  .navbar-nav {
    .nav-link {
      color: $colDefault;
      border-radius: .25rem;
      margin: 0 0.25em;
      &:not(.disabled) {
        &:hover,
        &:focus {
          color: $colHighlight;
        }
      }
    }
    @if ($dropDown) {
      .dropdown-menu {
        background-color: $bgDropdown;
        border-color: $bgHighlight;
        .dropdown-item {
          color: $colDefault;
          &:hover,
          &:focus,
          &.active {
            color: $colHighlight;
            background-color: $bgHighlight;
          }
        }
        .dropdown-divider {
          border-top-color: $bgHighlight;
        }
      }
    }
    .nav-item.active,
    .nav-item.show {
      .nav-link,
      .nav-link:hover,
      .nav-link:focus {
        color: $colHighlight;
        background-color: $bgHighlight;
      }
    }
  }
  .navbar-toggle {
    border-color: $bgHighlight;
    &:hover,
    &:focus {
      background-color: $bgHighlight;
    }
    .navbar-toggler-icon {
      color: $colDefault;
    }
  }
  .navbar-collapse,
  .navbar-form {
    border-color: $colDefault;
  }
  .navbar-link {
    color: $colDefault;
    &:hover {
      color: $colHighlight;
    }
  }
}

@media (max-width: 575px) {
  .navbar-expand-sm .navbar-nav .show .dropdown-menu {
    .dropdown-item {
      color: $colDefault;
      &:hover,
      &:focus {
        color: $colHighlight;
      }
    }
    .dropdown-item.active {
      color: $colHighlight;
      background-color: $bgHighlight;
    }
  }
}

@media (max-width: 767px) {
  .navbar-expand-md .navbar-nav .show .dropdown-menu {
    .dropdown-item {
      color: $colDefault;
      &:hover,
      &:focus {
        color: $colHighlight;
      }
    }
    .dropdown-item.active {
      color: $colHighlight;
      background-color: $bgHighlight;
    }
  }
}

@media (max-width: 991px) {
  .navbar-expand-lg .navbar-nav .show .dropdown-menu {
    .dropdown-item {
      color: $colDefault;
      &:hover,
      &:focus {
        color: $colHighlight;
      }
    }
    .dropdown-item.active {
      color: $colHighlight;
      background-color: $bgHighlight;
    }
  }
}

@media (max-width: 1199px) {
  .navbar-expand-xl .navbar-nav .show .dropdown-menu {
    .dropdown-item {
      color: $colDefault;
      &:hover,
      &:focus {
        color: $colHighlight;
      }
    }
    .dropdown-item.active {
      color: $colHighlight;
      background-color: $bgHighlight;
    }
  }
}

.navbar-expand .navbar-nav .show .dropdown-menu {
  .dropdown-item {
    color: $colDefault;
    &:hover,
    &:focus {
      color: $colHighlight;
    }
  }
  .dropdown-item.active {
    color: $colHighlight;
    background-color: $bgHighlight;
  }
}

#about {
  padding-top: 3em;
  padding-bottom: 3em;
}

#mainOverlay {
  margin: 0;
}

.logoImages {
  margin: auto;
  display: block;
}

//This is for the FA Icon alignment in the Skills list
.iconShift {
  //Moves the Honors and Awards heading to the left bc of the way the margin works on the FA Icons... Center doesn't take into accpint the icon
  margin-left: 40px;
}

dl {
  margin-left: 40px
}

dt {
  font-size: 1.3em;
  position: relative;
}

dt:not(:first-of-type) {
  margin-top: 2em
}

dt:before {
  content: "";
  font-family: FontAwesome;
  left: -40px;
  // position:absolute;
  top: 5px;
  display: inline-block;
  margin-right: 8px;
}

dt.achievement:before {
  content: "\f091";
  //These two nested lines control the FA Icon animation! because of the fact i am using a ::before element, I cannot use the native fa spinning classes explicitly in the html
  -webkit-animation: fa-spin 2s infinite linear;
  animation: fa-spin 2s infinite linear;
}

dt.academic:before {
  content: "\f19d";
}

dd {
  margin-left: 0
}

dd.description {
  font-size: 1 em;
}

/////

/*



      li:before {
        content: ""; 
        font-family: FontAwesome;
        left: -40px;
        position:absolute;
        top: 5px;
    }

    li.achievement:before {
        content: "\f091"; 

      //These two nested lines control the FA Icon animation! because of the fact i am using a ::before element, I cannot use the native fa spinning classes explicitly in the html
      -webkit-animation: fa-spin 2s infinite linear;
      animation: fa-spin 2s infinite linear;
    }

    li.puzzle:before {
      content: "\f12e"; 
      -webkit-animation: fa-spin 2s infinite linear;
      animation: fa-spin 2s infinite linear;
    }

    li.wrench:before {
      content: "\f0ad"; 
      -webkit-animation: fa-spin 2s infinite linear;
      animation: fa-spin 2s infinite linear;
    }

    li.academic:before {
      content: "\f19d"; 
      -webkit-animation: fa-spin 2s infinite linear;
      animation: fa-spin 2s infinite linear;
    }

    li.plane:before {
      content: "\f072"; 
      -webkit-animation: fa-spin 2s infinite linear;
      animation: fa-spin 2s infinite linear;
    }

    li.car:before {
      content: "\f1b9"; 
      -webkit-animation: fa-spin 2s infinite linear;
      animation: fa-spin 2s infinite linear;
    }

    li.volunteer:before {
      content: "\f0c0"; 
      -webkit-animation: fa-spin 2s infinite linear;
      animation: fa-spin 2s infinite linear;
    }

    li.camera:before {
      content: "\f030"; 
      -webkit-animation: fa-spin 2s infinite linear;
      animation: fa-spin 2s infinite linear;
    }

    */

.honors {
  justify-content: center;
}

li.puzzle::before {
  font-family: "FontAwesome";
  font-size: 1.1em;
  content: "\f12e";
  margin-right: 8px;
  display: inline-block;
  -webkit-animation: fa-spin 2s infinite linear;
  animation: fa-spin 2s infinite linear;
}

li.wrench::before {
  font-family: "FontAwesome";
  font-size: 1.1em;
  content: "\f0ad";
  margin-right: 8px;
  display: inline-block;
  -webkit-animation: fa-spin 2s infinite linear;
  animation: fa-spin 2s infinite linear;
}

li.plane::before {
  font-family: "FontAwesome";
  font-size: 1.1em;
  content: "\f072";
  margin-right: 8px;
  display: inline-block;
  -webkit-animation: fa-spin 2s infinite linear;
  animation: fa-spin 2s infinite linear;
}

li.car::before {
  font-family: "FontAwesome";
  font-size: 1.1em;
  content: "\f1b9";
  margin-right: 8px;
  display: inline-block;
  -webkit-animation: fa-spin 2s infinite linear;
  animation: fa-spin 2s infinite linear;
}

li.volunteer::before {
  font-family: "FontAwesome";
  font-size: 1.1em;
  content: "\f0c0";
  margin-right: 8px;
  display: inline-block;
  -webkit-animation: fa-spin 2s infinite linear;
  animation: fa-spin 2s infinite linear;
}

li.camera::before {
  font-family: "FontAwesome";
  font-size: 1em;
  content: "\f030";
  margin-right: 8px;
  display: inline-block;
  -webkit-animation: fa-spin 2s infinite linear;
  animation: fa-spin 2s infinite linear;
}

@keyframes fa-spin {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}

.shift {
  margin-left: 20px;
}

.barbie {
  list-style: none;
  margin: 0;
  padding: 0;
}

.baribieitem {
  text-align: right;
  font-size: 2em;
}

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

<section id="about">
  <h5 class="text-center pb-3">Ready to tackle any challenge. Proven by performance.</h5>
  <div class="container">
    <div class="row">
      <div class="col-md-4 ">
        <!--- Instruments -->
        <h4 class="text-center pt-3">Instruments</h4>
        <div class="progress mb-3" style="height: 35px">
          <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="width: 75%">CombiFlash® Rf+ </div>
        </div>
        <div class="progress mb-3" style="height: 35px">
          <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="width: 75%">Mass Spectrometer (GC-MS, ESI-MS, APCI-MS)</div>
        </div>
        <div class="progress mb-3" style="height: 35px">
          <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="width: 75%">NMR</div>
        </div>
        <div class="progress mb-3" style="height: 35px">
          <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="width: 75%">UV-Vis Spectrophotometer </div>
        </div>
        <!--- Languages -->
        <h4 class="text-center pt-5">Languages</h4>
        <div class="progress mb-3" style="height: 35px">
          <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="width: 75%">English </div>
        </div>
        <div class="progress mb-3" style="height: 35px">
          <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="width: 75%">Español</div>
        </div>
        <div class="progress mb-3" style="height: 35px">
          <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="width: 75%">Français</div>
        </div>
        <!--- Software -->
        <h4 class="text-center pt-5">Software</h4>
        <div class="progress mb-3" style="height: 35px">
          <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="width: 75%">ChemDraw </div>
        </div>
        <div class="progress mb-3" style="height: 35px">
          <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="width: 75%">Spartan ’16</div>
        </div>
        <div class="progress mb-3" style="height: 35px">
          <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="width: 75%">Bruker® TopSpin</div>
        </div>
        <div class="progress mb-3" style="height: 35px">
          <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="width: 75%">Adobe® Suite (Illustrator, Photoshop, and etc..)</div>
        </div>
        <div class="progress mb-3" style="height: 35px">
          <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="width: 75%">Wolfram® Mathematica</div>
        </div>
      </div>

      <div class="col-md-6 honors offset-md-2">
        <h4 class="text-center iconShift pt-3"> Notable Honors and Awards</h4>
        <dl>
          <dt class="achievement">Boy Scouts of America Eagle Scout Rank</dt>
          <dd class="description">The Highest Rank in Scouting</dd>
          <dd>April 2014</dd>

          <dt class="academic">Principal's Award of Excellence </dt>
          <dd class="description">Recognized for Scientific Research</dd>
          <dd>June 2013 & 2014</dd>


          <dt class="academic fa-spinner">Presidents Award for Educational Excellence</dt>
          <dd class="description">U.S. Department of Education | President Barack H. Obama</dd>
        </dl>


        <div class="container float-center">
          <h4 class="text-center pt-5">Hobbies and Interests</h4>
          <div class="row float-right">
            <div class="col" style="column-count: 2; column-gap: 15em;">
              <ul class="barbie list-unstyled">
                <li class="barbieitem pb-2 pt-2 puzzle text-left">Puzzles</li>
                <li class="barbieitem pb-2 pr-4 plane ">Travel</li>
                <li class="barbieitem pb-2 wrench text-left">Handy Work</li>
                <li class="barbieitem pb-2 plane text-left">Travel</li>
                <li class="barbieitem pb-2 volunteer text-left">Volunteering</li>
                <li class="barbieitem pb-2 car text-left">Automobiles</li>
                <li class="barbieitem pb-2 plane text-left">Travel</li>
                <li class="barbieitem pb-2 camera text-left">Photography</li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>