menu items toggle and display on screen size reduction

This is most likely the default behavior for Twenty Twelve; responsive for small screens and thus stacking elements on the page, including the contents of your nav, #site-navigation.

Let’s looks at the nav section in the default TT theme:

<nav id="site-navigation" class="main-navigation" role="navigation">
  <h3 class="menu-toggle">Menu</h3>
    <a class="assistive-text" href="#content" title="Skip to content">Skip to content</a>
    <div class="nav-menu">
       <ul class="nav-menu">

         <!-- More stuff below: li items, closing /ul, /div /nav tags-->

Basically, following a mobile first design philosophy, TT by default hides ul.nav-menu (display: none). Through the use of media queries it makes it visible for screens that have a minimum width of 600px. Through jQuery by clicking on .menu-toggle it adds an additional class of .toggled-on to ul.nav-menu to make it visible.

 // TT style.css lines 597 to 604
.main-navigation ul.nav-menu,
.main-navigation div.nav-menu > ul {
   display: none;
}
.main-navigation ul.nav-menu.toggled-on,
.menu-toggle {
   display: inline-block;
}

// 1421
@media screen and (min-width: 600px) {

    .main-navigation ul.nav-menu,
.main-navigation div.nav-menu > ul {
    border-bottom: 1px solid #ededed;
    border-top: 1px solid #ededed;
    display: inline-block !important;
    text-align: left;
    width: 100%;
}

In your childtheme, you have overridden the default display: none styles for .nav-menu so it’s visible at all screen sizes.

For a simple fix I would try to do something like this:

// Basically adding a media query to float your menu li elements when small screen using TT's breakpoint for small screens of 600px 
@media screen and (max-width: 599px) {
   .main-navigation li {
      float: left
   }
   ul.children {
      //hide the secondary links from displaying
      display:none;
   }
}