Помогите с задачей!

[Kz0u]

Здравствуйте!
Делаю сейчас сайт на блочной основе(где каждый элемент(картинка/текст) оформлены в виде квадратиков и размещены по сетке(нет, я не использую table) и допустим, что у меня есть в html'e такие моменты где блок текста следует перед блоком с картинкой, к примеру:

<div class="texttest">
   <a href="#">
      <h3>Заголовок</h3>
      Здесь идёт разный текст бла бла бла
   </a>
</div>
<div class="imagetest">
   <img alt="" src="images/kartino4ka.jpg">
</div>

В чём проблема: при изменении вида на адаптивное(при показе на мобильных устройствах) текст идёт перед картинкой, что не есть good. Помогите люди добрые статьями которые прочитав я смогу реализовать такой скрипт который когда ширина экрана будет меньше определённого будет менять данные два блока местами, либо кодом, но с комментариями(так как учиться всё-таки надо).
Также между данными блоками могут находиться блоки со стилем visibility:hidden, которые также будут удаляться с помощью remove(это я могу реализовать сам) когда ширина экрана будет меньше определённой. Не помешает-ли данный скрипт, если будет реализовываться перед скриптом со сменой местоположения блоков текста и картинки?

[Sigizmund2012]

Освойте сетку Bootstrap и не занимайтесь велосипедостроительством. Ещё вам помогут media queries http://htmlbook.ru/css/value/media

[jasper-blondin]

@media (min-width: 460px) {
   .imagetest {
      float: right;
   }
}

По-умолчанию (для мобильных устройств) картинка в коде расположена выше текста.
При просмотре на десктопах картинка выравнивается по правому краю, текст обтекает ее слева.

ИМХО, не приветствую перестановку элементов на странице при помощи JS (если только Вы не реализуете некий интерфейс веб-приложения).