Как перенести мега-меню, встроенное в Bootstrap версии 3, в версию 4

Question

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

Как мне упорядочить и сделать его меньше, чем в полноэкранном мегаменю?

<style>
        @import url(https://fonts.googleapis.com/css?family=Lato:300,400,700);
    .dropdown-large {
      position: static !important;
    }
    .dropdown-menu-large {
      margin-left: 16px;
      margin-right: 16px;
      padding: 20px 0px;
    }
    .dropdown-menu-large > li > ul {
      padding: 0;
      margin: 0;
    }
    .dropdown-menu-large > li > ul > li {
      list-style: none;
    }
    .dropdown-menu-large > li > ul > li > a {
      display: block;
      padding: 3px 20px;
      clear: both;
      font-weight:300;
      line-height: 1.428571429;
      color: #333333;
      white-space: normal;
    }
    .dropdown-menu-large > li ul > li > a:hover,
    .dropdown-menu-large > li ul > li > a:focus {
      text-decoration: none;
      color: #262626;
      background-color: #f5f5f5;
    }
    .dropdown-menu-large .disabled > a,
    .dropdown-menu-large .disabled > a:hover,
    .dropdown-menu-large .disabled > a:focus {
      color: #999999;
    }
    .dropdown-menu-large .disabled > a:hover,
    .dropdown-menu-large .disabled > a:focus {
      text-decoration: none;
      background-color: transparent;
      background-image: none;
      filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
      cursor: not-allowed;
    }
    .dropdown-menu-large .dropdown-header {
      color: #428bca;
      font-size: 18px;
    }
    @media (max-width: 768px) {
      .dropdown-menu-large {
        margin-left: 0 ;
        margin-right: 0 ;
      }
      .dropdown-menu-large > li {
        margin-bottom: 30px;
      }
      .dropdown-menu-large > li:last-child {
        margin-bottom: 0;
      }
      .dropdown-menu-large .dropdown-header {
        padding: 3px 15px !important;
      }
    }
</style>

<li class="dropdown dropdown-large">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>

    <ul class="dropdown-menu dropdown-menu-large row">
        <li class="col-sm-3">
            <ul>
                <li class="dropdown-header">Sword of Truths</li>
                <li><a href="#">Example</a></li>
                <li><a href="#">Example</a></li>
                <li><a href="#">Example</a></li>
                <li><a href="#">Example</a></li>
                <li><a href="#">Example</a></li>
                <li><a href="#">Example</a></li>
                <li class="divider"></li>
                <li class="dropdown-header">Theme/Character</li>
                <li><a href="#">Example</a></li>
                <li><a href="#">Example</a></li>
                <li><a href="#">Example</a></li>
                <li><a href="#">Example</a></li>

            </ul>
        </li>
        <li class="col-sm-3">
            <ul>
                <li class="dropdown-header">by brand</li>
                <li><a href="#">Example</a></li>
                <li><a href="#">Example</a></li>
                <li><a href="#">Example</a></li>
                <li><a href="#">Example</a></li>
                <li><a href="#">Example</a></li>
                <li><a href="#">Example</a></li>
                <li class="divider"></li>
                <li><img class="img-responsive" src="http://placehold.it/200x150"></li>
            </ul>
        </li>
        <li class="col-sm-3">
            <ul>
                <li class="dropdown-header">Sword of Truths</li>
                <li><a href="#">Example</a></li>
                <li><a href="#">Example</a></li>
                <li><a href="#">Example</a></li>
                <li><a href="#">Example</a></li>
                <li><a href="#">Example</a></li>
                <li><a href="#">Example</a></li>
                <li class="divider"></li>
                <li class="dropdown-header">Theme/Character</li>
                <li><a href="#">Example</a></li>
                <li><a href="#">Example</a></li>
                <li><a href="#">Example</a></li>
                <li><a href="#">Example</a></li>

            </ul>
        </li>
        <li class="col-sm-3">
            <ul>
                <li class="dropdown-header">by brand</li>
                <li><a href="#">Example</a></li>
                <li><a href="#">Example</a></li>
                <li><a href="#">Example</a></li>
                <li><a href="#">Example</a></li>
                <li><a href="#">Example</a></li>
                <li><a href="#">Example</a></li>
                <li class="divider"></li>
                <li><img class="img-responsive" src="http://placehold.it/200x150"></li>
            </ul>
        </li>

    </ul>
</li>