How to use Fragments / Activities on Phone and Tablet with DrawerLayout?

For Smartphones I designed my application that way, that I have 1 Activity, where Fragments are changed. The layout file of the activity looks that way:

<android.support.v4.widget.DrawerLayout
    xmlns:android="http://ift.tt/nIICcg"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    >

    <!-- content dynamically places here -->
    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/content_frame"></FrameLayout>

    <!-- drawer navigation -->
    <ListView
        android:id="@+id/left_drawer"
        android:layout_width="180dp"
        android:layout_height="match_parent"
        android:layout_gravity="left|start"
        android:background="#ffeeeeee"></ListView>

</android.support.v4.widget.DrawerLayout>

The FrameLayout is replaced by two different Fragments: A list view and a details view. This is how the list views fragment XML code looks like:

<ListView xmlns:android="http://ift.tt/nIICcg"
             android:layout_width="match_parent"
             android:layout_height="match_parent"
             android:id="@android:id/list"
             ></ListView>

This is the details fragments code:

<TextView xmlns:android="http://ift.tt/nIICcg"
          android:id="@+id/item_detail"
          style="?android:attr/textAppearanceLarge"
          android:layout_width="match_parent"
          android:layout_height="match_parent"
          android:padding="16dp"
          android:textIsSelectable="true"
          android:text="Hello World"/>

So now I want to archieve a design for tablets, where I have basically 2 columns. The first one is for the navigation drawer, that shall always be visible. The second one is for displaying contents.

One such content shall consist of the upper list and details view. How can I integrate the fragments then? May I use a fragment, that contains both?

This is for your information the tablet layout (sw600dp):

<LinearLayout
    xmlns:android="http://ift.tt/nIICcg"
    xmlns:tools="http://ift.tt/LrGmb4"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:baselineAligned="false"
    android:divider="?android:attr/dividerHorizontal"
    android:orientation="horizontal"
    android:showDividers="middle"
    android:id="@+id/recording_view"
    tools:context=".RecordingListActivity">

    <!-- static drawer navigation -->
    <ListView
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:id="@+id/left_drawer"
        android:choiceMode="singleChoice"></ListView>

    <!-- dynamic content -->
    <FrameLayout
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="5"
        android:id="@+id/list_and_details"></FrameLayout>

</LinearLayout>

EDIT_1:

In the image you see, what I want to achieve. The dark blue content shall be exchangeable. This is usually done via Fragments I think. So I could make a fragment, that contains a list and the details view. But is there a way to reuse the fragments from the phone?