Михаил Завалко

О, похоже что хотел)) https://codepen.io/Mixa_007/pen/jzzgKz

.drop-down-menu {
  width: 100%;
  float: none;
}

Расскажу какой костыль вставил, вдруг кому пригодится, хотя как говорят с Bootstrap 4 этой проблемы уже нет, но мало ли. В общем просто отдельно сделал 2 копии одних блоков, расположил в нужном порядке для мобильной и десктопной версии и скрыл от мобильной одну и показал другую и наоборот. jsfiddle.net/k39tyard/1

Подключи файл media.css к своему проекту, в него забей вот это:

/*==========  Desktop First Method  ==========*/

/* Large Devices, Wide Screens */
@media only screen and (max-width : 1200px) {

}

/* Medium Devices, Desktops */
@media only screen and (max-width : 992px) {
	
}

/* Small Devices, Tablets */
@media only screen and (max-width : 768px) {
	
}

/* Extra Small Devices, Phones */
@media only screen and (max-width : 480px) {
	
}

/* Custom, iPhone Retina */
@media only screen and (max-width : 320px) {

}


/*==========  Mobile First Method  ==========*/

/* Custom, iPhone Retina */
@media only screen and (min-width : 320px) {

}

/* Extra Small Devices, Phones */
@media only screen and (min-width : 480px) {

}

/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {

}

/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {

}

/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {

}

И в media only screen and (max-width : 480px) уменьшай свой шрифт огромный.