weemac123 on "Editing mobile responsive themes, and making a mess."

Hi, I'm hoping someone can help me!

I'm making my friend a website using the free, mobile-responsive, theme Bartleby. Basically, I have tweaked the CSS (quite a lot) to get it to look how I want. I have also used <div> tags in the static 'home' page, to create two columns, one for text and one for a slider. I only want this layout on the home page. The website is http://www.wereontourtravel.com, if you want to have a look.

Anyway, all my fiddling has caused the website to look terrible on a mobile phone! Is there an easy way to make the mobile display show the text above the slider, or vice versa, as opposed to splitting them into two columns like I want it to be when viewed on a computer?

The mobile responsive CSS is -

/* Minimum width of 1000 pixels. */
/* @media screen and (min-width: 1000px) {
// #secondary {
// margin-top: 10%;
// }
// p.featured-home-excerpt {
// min-height: 175px;
// }
/* } */

/* Minimum width of 600 pixels. */
@media screen and (min-width: 600px) {
.main-navigation ul.nav-menu,
.main-navigation div.nav-menu > ul {
display: inline-block !important;
text-align: center;
width: 100%;
}
.main-navigation ul {
margin: 0;
text-indent: 0;
}
.main-navigation li a,
.main-navigation li {
display: inline-block;
text-decoration: none;
}
.main-navigation li a {
border-bottom: 0;
color: #000000;
line-height: 2;
white-space: nowrap;
}
.main-navigation li a:hover {
color: #fff;
t}
.main-navigation li {
margin: 0 20px 0 0;
position: relative;
}
.main-navigation li ul {
display: none;
margin: 0;
padding: 0;
position: absolute;
top: 100%;
z-index: 1;
}
.main-navigation li ul ul {
top: 0;
left: 100%;
}
.main-navigation ul li:hover > ul {
border-left: 0;
display: block;
}
.main-navigation li ul li a {
background: #000;
color: #C0C0C0;
display: block;
font-size: 0.9em;
line-height: 1.181818182;
margin-top: -17px;
padding: 8px 10px;
}
.main-navigation li ul li a:hover {
color: #fff;
}
.main-navigation li ul li {
display: block;
}
.menu-toggle {
display: none!important;
}
}

(As you can see I have commented out the first part, but this hasn't helped. It is perhaps slightly better, but still awful!)

Any help would be greatly appreciated! And if I should just start again with a new theme... just tell me!

Many many many thanks in advance :)

Dannie