diff --git a/administrator/components/com_media/resources/scripts/components/app.vue b/administrator/components/com_media/resources/scripts/components/app.vue
index ae68a690eaa04..07f7370006b0e 100644
--- a/administrator/components/com_media/resources/scripts/components/app.vue
+++ b/administrator/components/com_media/resources/scripts/components/app.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="media-container">
-    <div class="media-sidebar col-md-2 d-none d-md-block">
+    <div class="media-sidebar d-none d-md-block">
       <media-disk
         v-for="(disk, index) in disks"
         :key="index"
@@ -8,11 +8,9 @@
         :disk="disk"
       />
     </div>
-    <div class="col-md-10">
-      <div class="media-main">
-        <media-toolbar />
-        <media-browser />
-      </div>
+    <div class="media-main">
+      <media-toolbar />
+      <media-browser />
     </div>
     <media-upload />
     <media-create-folder-modal />
diff --git a/administrator/components/com_media/resources/scripts/components/breadcrumb/breadcrumb.vue b/administrator/components/com_media/resources/scripts/components/breadcrumb/breadcrumb.vue
index e12deaf9a89b8..d5ac908639a14 100644
--- a/administrator/components/com_media/resources/scripts/components/breadcrumb/breadcrumb.vue
+++ b/administrator/components/com_media/resources/scripts/components/breadcrumb/breadcrumb.vue
@@ -4,11 +4,12 @@
     role="navigation"
     :aria-label="translate('COM_MEDIA_BREADCRUMB_LABEL')"
   >
-    <ol>
+    <ol class="breadcrumb">
       <li
         v-for="(val,index) in crumbs"
         :key="index"
-        class="media-breadcrumb-item"
+        class="media-breadcrumb-item breadcrumb-item"
+        :class="[(index === Object.keys(crumbs).length - 1) ? ' active' : '']"
       >
         <a
           href="#"
diff --git a/administrator/components/com_media/resources/scripts/components/toolbar/toolbar.vue b/administrator/components/com_media/resources/scripts/components/toolbar/toolbar.vue
index 74b6c677e4c5c..f72c6922be61e 100644
--- a/administrator/components/com_media/resources/scripts/components/toolbar/toolbar.vue
+++ b/administrator/components/com_media/resources/scripts/components/toolbar/toolbar.vue
@@ -8,6 +8,8 @@
       v-if="isLoading"
       class="media-loader"
     />
+    <media-breadcrumb class="d-md-none"/>
+
     <div class="media-view-icons">
       <a
         href="#"
@@ -21,9 +23,8 @@
         />
       </a>
     </div>
-    <media-breadcrumb />
     <div
-      class="media-view-search-input"
+      class="media-view-search-input d-none d-md-block"
       role="search"
     >
       <label
@@ -37,7 +38,7 @@
         @input="changeSearch"
       >
     </div>
-    <div class="media-view-icons">
+    <div class="media-view-icons media-view-icons-right">
       <button
         v-if="isGridView"
         type="button"
diff --git a/administrator/components/com_media/resources/styles/components/_layout.scss b/administrator/components/com_media/resources/styles/components/_layout.scss
index 4d94391d9217e..5c68c5b607c90 100644
--- a/administrator/components/com_media/resources/styles/components/_layout.scss
+++ b/administrator/components/com_media/resources/styles/components/_layout.scss
@@ -1,9 +1,11 @@
 // General layout
 .media-container {
-  display: flex;
+  display: grid;
+  grid-template-columns: auto 1fr;
   flex-wrap: wrap;
   margin-right: -($col-gutter-width / 2);
   margin-left: -($col-gutter-width / 2);
+
 }
 
 .media-col-main-panel {
@@ -34,11 +36,18 @@
 .media-main {
   position: relative;
   height: calc(100vh - 160px);
+  margin-left: 1rem;
   overflow: hidden;
   background-color: #fff;
   border: 1px solid $border-color;
   border-radius: $border-radius;
   box-shadow: $col-box-shadow;
+
+  /* Small devices (Portrait and Landscape, < 576px) */
+  @media (max-width: var(--breakpoint-sm)) {
+    margin-top: 4.5vh;
+    margin-left: 0;
+  }
 }
 
 .media-sidebar {
diff --git a/administrator/components/com_media/resources/styles/components/_media-breadcrumb.scss b/administrator/components/com_media/resources/styles/components/_media-breadcrumb.scss
index 21fdc086d519a..ad5dd563776f2 100644
--- a/administrator/components/com_media/resources/styles/components/_media-breadcrumb.scss
+++ b/administrator/components/com_media/resources/styles/components/_media-breadcrumb.scss
@@ -1,15 +1,17 @@
 .media-breadcrumb {
-  display: flex;
+  display: inline-block;
+  max-width: 100vw;
   padding: 0;
   margin: 0 auto 0 0;
   font-size: .9rem;
-  line-height: $toolbar-height;
   background: transparent;
   border-left: 1px solid $border-color;
-
+  @media (min-width: 576px) {
+    line-height: $toolbar-height;
+  }
   ol {
-    display: flex;
-    padding: 0;
+    //display: flex;
+    padding: 4px 0;
     margin: 0;
     list-style: outside none none;
 
@@ -20,7 +22,7 @@
 }
 
 .media-breadcrumb-item {
-  padding: 0 8px 0 22px;
+  padding: 0 4px;
   background-color: $breadcrumbs-bg;
   &:first-of-type {
     padding-left: 16px;
@@ -38,21 +40,7 @@
 
 .media-breadcrumb-item {
   position: relative;
-  &::before, &::after {
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 100%;
-    z-index: 2;
-    display: block;
-    width: 0;
-    height: 0;
-    margin: auto;
-    content: "" !important;
-    border-top: 23px solid transparent;
-    border-bottom: 23px solid transparent;
-    border-left: 10px solid transparent;
-  }
+
   &::before {
     border-left-color: $border-color;
   }
@@ -73,12 +61,10 @@ html[dir=rtl] .media-breadcrumb {
 
 html[dir=rtl] .media-breadcrumb-item::after, .media-breadcrumb-item::before {
   right: 100%;
-  border-right: 10px solid transparent;
-  border-left: 0;
 }
 
 html[dir=rtl] .media-breadcrumb-item {
-  padding: 0 22px 0 8px;
+  padding: 0 8px;
 }
 
 html[dir=rtl] .media-breadcrumb-item::before {
diff --git a/administrator/components/com_media/resources/styles/components/_media-browser.scss b/administrator/components/com_media/resources/styles/components/_media-browser.scss
index 22b6e8ccc0e39..69e962b76e145 100644
--- a/administrator/components/com_media/resources/styles/components/_media-browser.scss
+++ b/administrator/components/com_media/resources/styles/components/_media-browser.scss
@@ -13,12 +13,14 @@
 }
 
 .media-browser-items {
-  display: flex;
+  display: inline-flex;
   flex-wrap: wrap;
+  justify-content: flex-start;
 }
 
 .media-browser-item {
   position: relative;
+  flex: 1 1;
   margin-right: $grid-gutter-width;
   margin-bottom: $grid-gutter-width;
   cursor: pointer;
@@ -27,7 +29,8 @@
     width: calc(#{$grid-item-width-sm} - #{$grid-gutter-width});
   }
   .media-browser-items-md & {
-    width: calc(#{$grid-item-width-md} - #{$grid-gutter-width});
+    min-width: 8rem;
+    max-width: calc(#{$grid-item-width-md} - #{$grid-gutter-width});
   }
   .media-browser-items-lg & {
     width: calc(#{$grid-item-width-lg} - #{$grid-gutter-width});
@@ -207,7 +210,7 @@
   padding-bottom: 100%;
   background-repeat: no-repeat;
   background-position: center;
-  background-size: contain;
+  background-size: cover;
   border-radius: $grid-item-border-radius;
 }
 
diff --git a/administrator/components/com_media/resources/styles/components/_media-infobar.scss b/administrator/components/com_media/resources/styles/components/_media-infobar.scss
index 982c7158b4a37..25e02ff63add2 100644
--- a/administrator/components/com_media/resources/styles/components/_media-infobar.scss
+++ b/administrator/components/com_media/resources/styles/components/_media-infobar.scss
@@ -8,7 +8,7 @@ $fa-css-prefix:    fa;
   bottom: 0;
   z-index: 4;
   float: none;
-  width: 25%;
+  width: 50vw;
   padding: $gutter-width;
   overflow-y: scroll;
   background-color: $info-bg;
diff --git a/administrator/components/com_media/resources/styles/components/_media-toolbar.scss b/administrator/components/com_media/resources/styles/components/_media-toolbar.scss
index f93aab77d3944..7b33b02c5a9f8 100644
--- a/administrator/components/com_media/resources/styles/components/_media-toolbar.scss
+++ b/administrator/components/com_media/resources/styles/components/_media-toolbar.scss
@@ -1,6 +1,9 @@
 .media-toolbar {
   position: relative;
   display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: space-between;
   padding: 0;
   background-color: $toolbar-bg;
   border-bottom: 1px solid $border-color;
@@ -30,7 +33,7 @@
 }
 
 .media-view-icons {
-  display: flex;
+  grid-row: 2;
   .disabled {
     span {
       opacity: .3;
@@ -39,12 +42,18 @@
       cursor: default;
     }
   }
+  &:last-child {
+    padding-right: 0;
+  }
+  &.media-view-icons-right {
+    text-align: right;
+  }
 }
 
 .media-view-search-input {
-  display: flex;
-  align-items: center;
-  padding: 0 10px;
+  grid-row: 2;
+  align-self: center;
+  padding: 0;
 }
 
 .media-loader {
diff --git a/tests/Codeception/acceptance/administrator/components/com_media/MediaListCest.php b/tests/Codeception/acceptance/administrator/components/com_media/MediaListCest.php
index 4148e3edfff24..688d149046d9a 100644
--- a/tests/Codeception/acceptance/administrator/components/com_media/MediaListCest.php
+++ b/tests/Codeception/acceptance/administrator/components/com_media/MediaListCest.php
@@ -243,6 +243,7 @@ public function navigateUsingTree(Media $I)
 
 	/**
 	 * Test that it's possible to navigate to a subfolder using breadcrumb.
+	 * requires mobile window size to view breadcrumbs
 	 *
 	 * @param   Media  $I
 	 *
@@ -254,11 +255,14 @@ public function navigateUsingBreadcrumb(Media $I)
 	{
 		$I->wantToTest('that it is possible to navigate to a subfolder using breadcrumb.');
 		$I->amOnPage(MediaListPage::$url . 'banners');
+		$I->resizeWindow(320, 480);
 		$I->waitForMediaLoaded();
 		$I->clickOnLinkInBreadcrumb('images');
 		$I->waitForMediaLoaded();
 		$I->seeInCurrentUrl(MediaListPage::$url);
 		$I->seeContents($this->contents['root']);
+		$I->resizeWindow(1920, 1080);
+		$I->waitForMediaLoaded();
 	}
 
 	/**