ubicar div debajo de otro

[chacabuco]

Estimados, voy a tratar de explicar lo mas claro posible mi dificultad:
Tengo una barra de navegacion y debajo un carousel. Por encima del carousel hay un div q contiene una imagen. Hasta ahi todo bien para pantallas grandes.
Ahora cuando aplico @media screen and (min-width:768px) quiero que esa imagen que está por encima de carousel se ubique en una nueva posición que es entre la barra de navegación y el carousel.
Armé esta imagen para poder explicarlo mejor.

Los estilos de ése div son:

.bt-sorteo-home {
float: left;
position: absolute;
left: 69%;
top: 7%;
z-index: 20;
}

La pregunta es:
Cómo debo modificarlos para que en (min-width:768px) se ubique como yo pretendo?

Agradeceré cualquier tipo de ayuda.
Siempre encuentro las mejores respuestas en este foro
Saludos
Marisa.-

[ArturoGallegos]

Es realmente necesario usar position:absolute?

Con el código que muestras nosotros no entendemos ni podemos ver cual es el problema que tienes.... y así como adivinos no andamos muy bien.

[chacabuco]

Hola Arturo, gracias por tu ayuda.
Estoy usando boostrap, creo que ese dato es importante.
Copio el codigo HTML (resumido)

<nav>
..............................
</nav>

<div class="bt-sorteo-home">
<a href="#"><img src="img/bt-sorteo.gif" alt="sorteo"></a>
</div>

<div class="carousel slide" id="carousel-534568">
..............................
</div>

y luego el CSS que ya había mostrado en el mensaje anterior.
En todo caso, será que puedo enviarte el link x privado?
De nuevo muchas gracias por tu ayuda.
Saludos.

[MMG19941107]

Hola que tal mira, una de las sugerencias que te puedo dar, aprobechando que utilizas bootstrap, es utilizar su sistema de regillas, y la estructura de esto es la siguiente,

<div class="container">
<div class="row">
<div class="col-lg-4"></div>
<div class="col-lg-4"></div>
<div class="col-lg-4"></div>
</div>
</div>

recuerda que el sistema de grillas solo genera diviciones de 12 columnas y para hacer lo que pretendes podrias hacer algo como esto

<div class="container">
<div class="row">
<div class="col-md-4 col-lg-12"></div>
<div class="col-md-4 col-lg-12"></div>
<div class="col-md-4 col-lg-12"></div>
</div>
</div>

[xfxstudios]

Aqui te hice una muestra, creo es lo que buscas hacer:

Código HTML:

<div class="row">
    <div class="container">
      <div class="col-lg-12 coll-md-12 barra">
        <!--AQUI BARRA DE NAVEGACION-->
      </div>
      
      <div class="row">
        <div class="col-lg-4 col-md-12 pull-right imagen">
          <!--AQUI LA IMAGEN-->
        </div>
      </div>
      
      <div class="row">
          <!--AQUI EL CARROUSEL-->
      </div>
  </div>
</div>
 

http://codepen.io/anon/pen/zBmxvy

al cerrar un poco la ventana se adaptan los div a su tamaño, pero la cosa va mas allá con bootstrap

[rodrypaladin]

Si te quedas con el ejemplo de @xfxstudios creo que es más correcto al contrario, primero el container, y dentro los row. Y otro apunte: si ponemos la clase col-md-12, la clase superior col-lg-12 también será de 12 columnas. Y si ponemos col-sm-12, las clases superiores col-md-12 y col-lg-12 también serán de 12 columnas. Tampoco dejaría en el ultimo row sin meter dentro un div con indicando la cantidad de columnas

Código HTML:

<div class="container">
    <div class="row">
        <div class="col-md-12 barra"></div>
        <!--AQUI BARRA DE NAVEGACION-->
    </div>
 
    <div class="row">
        <div class="col-md-12 col-lg-4 pull-right imagen">
            <!-- AQUI LA IMAGEN -->
        </div>
        
        <div class="row">
            <div class="col-md-12">
                <!--AQUI EL CARROYSEL-->
            </div>
        </div>
    </div>
</div>